flex-grow 的数值代表剩余空间的分配权重，而非父容器百分比；它按设定比例瓜分减去子元素基础尺寸后的剩余空间，基础尺寸默认为内容宽度或 width 值。
flex-grow 的数值到底代表什么
flex-grow 不是“占父容器百分之几”，而是“剩余空间的分配权重”。比如两个子元素分别设 flex-grow: 2 和 flex-grow: 1，它们会按 2:1 的比例瓜分父容器中**减去所有子元素基础尺寸后的剩余空间**。
基础尺寸默认是子元素自身的 width 或内容宽度（即 flex-basis 默认为 auto）。如果没设宽，又没内容，就可能塌缩——这是常见困惑源头。
- 设
flex-grow: 0→ 不参与剩余空间分配（保持自身尺寸） - 设
flex-grow: 1且其他兄弟也是1→ 均分剩余空间 - 设
flex-grow: 0但显式写了width: 200px→ 它占固定 200px，其余空间由其他可伸缩项分
为什么设置了 flex-grow 却没效果
最常踩的坑：父容器没设 display: flex，或子元素被 float / position: absolute 脱离文档流。另外，flex-grow 只在主轴方向起作用，如果主轴是 column 却指望水平撑开，自然无效。
- 检查父元素是否真有
display: flex（不是inline-flex也能用，但注意 inline 行为） - 确认子元素没有
flex: none、flex-grow: 0覆盖，或被min-width/max-width锁死 - 若子元素含图片或块级内容，记得设
img { max-width: 100% }，否则可能溢出挤占计算 - Chrome DevTools 里看 computed 样式，确认
flex-grow值没被继承或重置
按比例分配的几种典型写法
想实现 3:2:1 的宽度比，不是直接写 width: 50% 那种硬编码，而是靠 flex-grow 的相对性：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.item-1 { flex-grow: 3; }
.item-2 { flex-grow: 2; }
.item-3 { flex-grow: 1; }
但如果希望“即使内容很少也保底占一定宽度”，就得配合 flex-basis：
.item-1 { flex: 3 1 200px; } /* grow: 3, shrink: 1, basis: 200px */
.item-2 { flex: 2 1 150px; }
.item-3 { flex: 1 1 100px; }
-
flex: 1是flex: 1 1 0的简写，意味着从零开始分剩余空间 -
flex: 0 0 auto完全不伸缩，适合操作按钮等固定尺寸控件 - 避免混用
width和flex-grow：当flex-basis为auto时，width会影响基础尺寸，进而改变剩余空间量
在响应式中 flex-grow 容易被忽略的点
媒体查询里改 flex-direction 或换主轴后，flex-grow 依然只沿新主轴生效，但开发者常误以为它会自动“转成高度分配”。其实不会——它始终只控制主轴方向的拉伸。
- 竖排（
flex-direction: column）时，flex-grow控制的是高度分配，此时需确保父容器有明确height，否则“剩余空间”为 0 - 移动端小屏下，建议用
flex-wrap: wrap+flex-grow组合，而不是强行让所有项单行挤满 - IE10/11 对
flex-grow支持有 bug（如不识别小数），如需兼容，优先用整数，避开flex-grow: 0.5这类写法
真正要小心的，是把 flex-grow 当成万能等比工具——它依赖剩余空间存在，而剩余空间又取决于 flex-basis、内容尺寸、盒模型和父容器约束。一环没对上，比例就失准。
