flex-grow设为0、1、2时按权重分配剩余空间，非直接决定最终宽度占比；需统一flex-basis（如0）才能实现1:2:1等比分配，否则受原始内容宽度影响。
flex-grow 设为 0、1、2 时到底怎么分剩余空间
flex-grow 控制的是「剩余空间如何分配」，不是「最终宽度占比」。很多人误以为设 flex-grow: 2 就占 2/3，其实它只表示权重比例，前提是所有子项的 flex-basis 相同（默认是 auto，即内容宽度）。如果子项原始宽度差异大，结果会明显偏离预期。
- 当所有子项
flex-basis一致（比如都显式设为flex-basis: 0），flex-grow才真正按权重切分剩余空间：设为1、2、1，三者分得空间比就是 1:2:1 - 若未重置
flex-basis，浏览器先按内容宽渲染，再把剩余空间按flex-grow分——此时文字多的项本身已占位宽，加权后可能膨胀得更离谱 - 常见错误：给
img或带内边距的div直接设flex-grow却不设flex-basis: 0，导致图片被拉伸变形或布局错乱
为什么 flex-grow: 1 不总让子项等宽
因为 flex-grow: 1 不等于「均分容器」，它只是说「所有子项平分剩余空间」。而「剩余空间 = 容器宽 − 子项原始宽度和」。只要子项原始宽度不同，最终宽度就不同。
- 场景：两个
div，一个含短文本（原始宽 80px），一个含长文本（原始宽 200px），容器宽 600px，都设flex-grow: 1→ 剩余空间 = 600 − (80 + 200) = 320px → 各分 160px → 最终宽分别为 240px 和 360px - 解决办法：统一设
flex-basis: 0，强制抹掉原始宽度影响，此时flex-grow: 1才真能等宽 - 注意：
flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写，但很多老教程误写成flex-basis: 0px或漏掉单位，实际应写flex-basis: 0（无单位）才符合规范
flex-grow 遇到 min-width / max-width 时的行为
flex-grow 的分配过程在 min-width 和 max-width 之后生效——也就是说，浏览器先确保每个子项不小于 min-width、不大于 max-width，再用剩余空间去分配。
- 如果某子项设了
min-width: 300px，而它按权重本该只分到 200px，那它仍会占满 300px，多占的部分从其他子项的可分配空间里扣 - 反过来，设了
max-width: 100px的子项，即使权重高、该分 250px，也最多停在 100px，溢出空间重新分配给其余项 - 实操建议：调试时打开浏览器开发者工具，勾选「Layout」面板里的「Flexbox overlay」，能直观看到各子项的基线、剩余空间和实际伸缩结果
IE11 下 flex-grow 的兼容性坑
IE11 对 flex-grow 支持有严重缺陷：它不识别 flex-grow: 0，会当成 flex-grow: 1 处理；同时对小数权重（如 flex-grow: 0.5）直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 必须避免写
flex-grow: 0，改用flex: none或完整写法flex: 0 0 auto - 权重想表达 1:2，别写
flex-grow: 1和flex-grow: 2，IE11 会把两者都当作 1；应改用整数倍差值更大的值，比如flex-grow: 100和flex-grow: 200（IE11 虽解析错，但相对比例还能保） - 更稳妥的做法：用
@supports (display: flex)包裹现代写法，IE11 进不到里面；或者用 Autoprefixer + postcss-flexbugs-fixes 插件自动补丁
flex-grow 看似简单，但它的计算依赖 flex-basis、受 min/max-width 截断、在 IE 里又失效——真正决定最终宽度的，是一整套隐式规则，而不是那个数字本身。
