flex-grow 的数值表示子项对主轴剩余空间的分配比例，非像素或百分比；仅当容器有剩余空间时生效，比例决定各子项扩展量，绝对值无意义。
flex-grow 的数值含义是什么
flex-grow 控制的是 flex 项在主轴方向上「剩余空间」的分配比例，不是固定像素值，也不是百分比。它只在容器有剩余空间时起作用；如果所有子项已撑满容器，flex-grow 完全不生效。
例如容器总宽 600px，三个子项内容宽度分别为 100px、120px、80px，合计 300px，则剩余空间为 300px。此时：
- 若三者
flex-grow均为 1 → 各分得 100px - 若设为
flex-grow: 2、1、1→ 按 2:1:1 分配，即 150px / 75px / 75px - 若某项设为
flex-grow: 0→ 它不参与扩展，保持原有内容宽度（哪怕其他项在拉伸）
flex-grow: 0 和不写 flex-grow 的区别
不写 flex-grow 等价于 flex-grow: 0，但要注意：如果用了 flex 简写（如 flex: 1 或 flex: 0 1 auto），会覆盖默认值，行为可能不同。
-
flex: 0 1 auto→flex-grow: 0，flex-shrink: 1，flex-basis: auto -
flex: 1→ 等价于flex: 1 1 0%，即flex-grow: 1，会参与扩展 - 单独写
flex-grow: 0而没动flex-shrink或flex-basis→ 安全，语义明确
为什么设置了 flex-grow 却没看到扩展效果
最常见原因是主轴方向上没有「剩余空间」——要么子项内容本身已超出容器（触发换行或溢出），要么容器被限制了尺寸且子项总和 ≥ 容器尺寸。
立即学习“前端免费学习笔记（深入）”；
