flex: 1 不是均分指令而是从 flex-basis 开始增长，等价于 flex: 1 1 auto；要真正均分需显式设 flex-basis: 0，即 flex: 1 1 0，并注意 min-width、width、gap、padding 等隐形干扰。
flex: 1 不是“均分指令”，而是“从 flex-basis 开始增长”
写 flex: 1 等价于 flex: 1 1 auto，第三个值 flex-basis: auto 意味着：浏览器先按子元素自身内容宽度（或已设的 width、min-width）占位，再把剩余空间按 flex-grow 分配。内容多的项起点宽，自然分得更多——这不是 bug，是默认行为。
- 含长文本、图片、
<input>的子项，默认有min-width: auto，会卡住不收缩 -
white-space: nowrap+ 超长无空格字符串，直接撑开自身，flex-basis: auto就失效了 - 父容器没设明确
width，或被float/position: absolute干扰，导致“剩余空间”算不出来
真正等宽必须显式设 flex-basis: 0
要让所有子项从零宽度起步、再均分，就得覆盖掉 auto。最稳妥写法是 flex: 1 1 0（注意是 0，不是 0%），它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 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: 1 1 0 还不均？查这些隐形干扰
常见“明明写了却无效”的原因，往往藏在看不见的地方：
- 子项写了
width、min-width或max-width—— 直接覆盖flex-basis - 子项内有替换元素（如
<img>、<textarea></textarea>），自带min-width: auto，需额外加min-width: 0 - 父容器用了
gap，但子项又自己加了margin，导致总宽超限，触发flex-shrink而非flex-grow - 子项
padding不一致 ——flex分配的是 content box 宽度，padding占用的空间仍会计入总宽
垂直方向填不满？主轴和高度链都得对
水平方向常能“蒙对”，垂直方向更容易翻车。关键点不在 flex: 1 本身，而在上下文：
- 父容器必须设
display: flex且flex-direction: column，否则flex-grow作用在宽度上 - 根容器至少要有
min-height: 100dvh（别用100vh，iOS 软键盘会缩 viewport） - 中间层容器若也参与纵向分配，它自己必须是
display: flex，不能只靠继承 - 子项写了
height、min-height或没重置flex-basis，都会锁死伸展机会
flex: 1 1 0 + min-width: 0 + gap 是最稳的组合，但每一层 DOM 结构和每一处隐式尺寸限制都可能成为漏网之鱼。调试时优先看 computed 样式里 flex-basis 和 min-width 的真实值，比反复调 flex-grow 数字更有效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
