flex: 1未让子项等宽是因为其简写为flex: 1 1 auto，flex-basis: auto使子项按内容宽度定初始尺寸，再分配剩余空间，导致起点不一致；必须显式设flex-basis: 0（如flex: 1 1 0）并配合min-width: 0才能真正等宽。
flex: 1 为什么没让子项等宽
因为 flex: 1 实际是 flex: 1 1 auto，第三个值 flex-basis: auto 会让浏览器先按内容宽度（或已设的 width）定初始尺寸，再分配剩余空间——内容长的项起点就大，自然更宽。这不是 bug，是默认行为。
常见错误现象：.item { flex: 1; } 写了三遍，但一个子项里是“Hello”，另一个是超长无空格字符串 aaaaaaaaaaaaaaaaaaaa，后者明显更宽甚至溢出。
- 子项含图片、
<input>、<textarea></textarea>等替换元素时，默认有min-width: auto，会卡住不收缩 - 父容器没设明确
width或被浮动/绝对定位影响，导致可用空间不确定 - 子项写了
width、min-width或max-width，直接覆盖flex-basis的作用
怎么强制等宽：必须设 flex-basis: 0
等宽的关键不是调 flex-grow，而是把起点拉平——所有子项从 0 宽度开始，再由 flex-grow 均分剩余空间。
正确写法是：flex: 1 1 0（推荐），或拆开写：flex-grow: 1; flex-shrink: 1; flex-basis: 0;。注意不是 0%，0 更稳妥，避免某些旧引擎解析歧义。
立即学习“前端免费学习笔记（深入）”；
- 三列等宽：
.item { flex: 1 1 0; } - 两列 2:1 比例：
.main { flex: 2 1 0; } .aside { flex: 1 1 0; } - 固定宽 + 自适应：
.fixed { flex: 0 0 200px; } .fluid { flex: 1 1 0; }
为什么加了 flex-basis: 0 还不均？检查这些干扰项
即使写了 flex: 1 1 0，仍可能失效，原因往往藏在“看不见”的样式里。
-
min-width太大（如min-width: 150px）会阻止收缩，让flex-basis: 0形同虚设 - 子项内文字不换行：
white-space: nowrap配合长文本，会撑开自身；可加min-width: 0允许压缩 - 图片或表单控件自带
min-width: auto，需显式设min-width: 0才能参与弹性缩放 - 父容器用了
flex-wrap: wrap，但子项总宽已超容器，此时flex-grow不触发，flex-shrink开始工作，但收缩量取决于flex-basis × shrink，未必均匀
间隙用 gap，别碰 margin
加间隙时用容器级 gap，不是给每个子项加 margin-right。后者会导致最后一项多出空白，还可能因 box-sizing 不一致让实际宽度超出预期。
gap 在现代浏览器中已全平台支持（Chrome 84+、Firefox 63+、Safari 14.1+），无需 polyfill。
- 水平间隙：
.container { display: flex; gap: 12px; } - 只控制行间（垂直）：
row-gap: 8px - 要兼容老 Safari（margin-right +
:last-child { margin-right: 0; }，但务必配合flex-basis: 0，否则 margin 会被纳入 flex 计算
真正卡住的点往往不在 flex 属性本身，而在开发者工具里看到的 “Flex base size” 和 “Used width” 是否匹配预期——很多问题，是浏览器把 flex-basis: auto 解析成了内容宽度，而你根本没意识到它被悄悄替换了。
