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 却没看到扩展效果
最常见原因是主轴方向上没有「剩余空间」——要么子项内容本身已超出容器（触发换行或溢出），要么容器被限制了尺寸且子项总和 ≥ 容器尺寸。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设置了
flex-wrap: nowrap（默认值），且子项未被压缩（flex-shrink: 0）导致撑爆容器 - 确认父容器有明确宽度（如
width或max-width），否则 flex 容器可能收缩包裹内容，无剩余空间可分 - 用浏览器开发者工具查看 computed 样式中的
flex-basis：若它是auto且内容宽，那初始占用就大，留给flex-grow的余量可能极小甚至为负 - 避免混用
width和flex-grow：显式width会干扰flex-basis计算，建议统一用flex-basis或简写flex
flex-grow 在响应式布局中的典型用法
常用于「头部导航栏」或「卡片栅格」中让某一项自适应占满剩余宽度，同时保持其他项固定尺寸。
.nav {
display: flex;
}
.nav-logo { width: 120px; }
.nav-search { flex-grow: 1; max-width: 400px; }
.nav-actions { width: 180px; }
这里 .nav-search 会尽可能拉伸，但不超过 400px；当屏幕变窄时，flex-grow 仍优先保障它获得可用空间，而两侧固定宽元素不受影响。
注意：flex-grow 本身不响应屏幕尺寸变化，它的效果依赖于容器尺寸变化 —— 所以真正起响应作用的是容器的媒体查询或流式宽度设置，flex-grow 只是“被动配合”分配逻辑。
容易被忽略的一点：多个 flex-grow 非零项并存时，它们之间的相对比例才是关键，绝对数值没意义；把所有值乘以 10 不会改变布局结果。
