flex等分核心是统一设flex:1且父容器有明确宽度；小屏用flex-wrap配合flex-basis调整每行个数；需加min-width:0和box-sizing:border-box防干扰。
flex 元素等分排列的核心控制点是 flex 值和容器的 flex-wrap
等分不是靠媒体查询“强行切分”，而是让每个子项在容器内自动均分剩余空间。关键在于统一设置 flex: 1（即 flex: 1 1 0），并确保父容器有明确宽度、无溢出干扰。媒体查询只负责在断点处切换布局逻辑（比如从单行变多行），而不是重复定义等分行为。
小屏幕下用 flex-wrap: wrap 配合 flex-basis 控制换行后每行个数
纯 flex: 1 在窄屏下会导致子项过窄甚至文字折行错乱。这时应在媒体查询中调整 flex-basis，让每项占据合理基础宽度，再配合 flex-wrap: wrap 自动换行：
- 桌面端：设
flex: 1，4 项占满一行 - 平板（768px）：设
flex: 0 0 calc(50% - 10px)，每行最多 2 项 - 手机（480px）：设
flex: 0 0 100%，每行仅 1 项
.container {
display: flex;
gap: 20px;
}
.item {
flex: 1;
}
<p>@media (max-width: 768px) {
.item {
flex: 0 0 calc(50% - 10px); /<em> 减去一半 gap </em>/
}
}</p><p>@media (max-width: 480px) {
.item {
flex: 0 0 100%;
}
}别漏掉 min-width 和 box-sizing 这两个隐形破坏者
如果子项内有固定宽元素（如图标、输入框）或 padding/margin 未归一化，flex: 1 可能失效——浏览器会优先满足最小内容宽度。必须显式约束：
- 所有
.item加min-width: 0，允许 flex 项压缩到零宽（防止内容撑开） - 确保
box-sizing: border-box已全局或局部生效，否则 padding 会额外增加宽度 - 避免子项内使用
width: 100%或float，它们会干扰 flex 计算
用 flex-grow 替代 flex: 1 更易调试响应行为
flex: 1 是简写，实际展开为 flex-grow: 1; flex-shrink: 1; flex-basis: 0。但某些场景下（比如希望子项不收缩），直接写 flex-grow: 1 + 显式 flex-basis 更可控：
立即学习“前端免费学习笔记（深入）”；
@media (min-width: 1024px) {
.item {
flex-grow: 1;
flex-basis: 0; /* 真正均分，无视内容宽度 */
}
}
<p>@media (max-width: 1023px) {
.item {
flex-grow: 0;
flex-basis: 200px; /<em> 固定基础宽，靠 wrap 排列 </em>/
}
}这种写法把“增长”和“基准”拆开，调试时改一个值就能看出效果差异，比反复调 flex 简写更直观。
真正容易被忽略的是：flex 等分依赖父容器宽度是否真实受限。如果外层是 position: absolute 或 display: inline-flex，又没设 width，那所有媒体查询里的 flex 调整都白搭。
