flex-grow 是剩余空间的分配权重而非百分比，仅在父容器有剩余空间时生效，其值表示相对比例；需配合 flex-basis 控制起点，设为 0 才能按权重均分整个容器宽度。
flex-grow 值不是百分比，而是剩余空间的分配权重
很多人一上来就写 flex-grow: 25 想占 25%，结果发现完全不生效——flex-grow 只在父容器有「剩余空间」时才起作用，且它的数值是相对比例，不是百分比。比如三个子项分别设 flex-grow: 1、flex-grow: 2、flex-grow: 1，它们会按 1:2:1 分配父容器里「超出内容宽度」的那部分空间。
常见错误现象：flex-grow 完全没反应，元素还是挤在一起或溢出；或者设置了 flex-grow: 100 和 flex-grow: 1，以为能实现 100:1，实际只是约等于 100 倍宽（前提是其他条件一致）。
- 必须确保父容器是
display: flex，且子项没有设置flex: none或flex-shrink: 0干扰伸缩 - 子项原始宽度（如
width、内容长度）会影响起点，flex-grow只管“多出来的部分” - 如果所有子项都设了固定
width且总和已占满容器，flex-grow就无空间可分，直接失效
用 flex: 0 1 auto + flex-grow 组合控制是否参与伸缩
想让某个容器“固定宽度、不随内容变，也不抢剩余空间”，光靠 flex-grow: 0 不够——它还可能被 flex-shrink 压缩。正确姿势是显式声明 flex 简写，比如 flex: 0 1 auto 表示不放大、可缩小、基准为内容宽；而 flex: 1 1 0 才是“全力参与剩余空间分配”的典型写法。
使用场景：侧边栏固定 240px，主内容区占剩余全部宽度，右侧工具栏固定 80px——这时只有主内容区该设 flex-grow: 1，其余两个必须阻断伸缩行为。
立即学习“前端免费学习笔记（深入）”；
-
flex: 0 0 240px→ 固定 240px，不放大不缩小 -
flex: 1 1 0→ 基准为 0，把全部剩余空间都拿走（最常用） - 避免混用
width和flex-grow：比如width: 200px; flex-grow: 1，会导致它先占 200px，再分剩余空间，容易误判最终宽度
flex-basis 为 0 时，flex-grow 才真正按权重均分容器
当希望两个容器严格按 2:1 分配整个父容器宽度（而非仅剩余空间），就得把 flex-basis 设为 0，比如 flex: 2 1 0 和 flex: 1 1 0。这样它们的“初始占用”都是 0，所有空间都由 flex-grow 决定，结果就是 2/3 和 1/3。
性能影响：浏览器计算 flex 分布时，flex-basis: 0 比 flex-basis: auto 更快，因为跳过了内容尺寸测量；但代价是丢失语义性——你得自己确保内容不会撑爆。
-
flex: 2 1 0≠flex-grow: 2单独写，后者等价于flex: 2 1 auto，仍以内容宽为起点 - 若内容本身很长，
flex-basis: 0可能导致文字换行或溢出，需配合min-width: 0和overflow控制 - IE11 对
flex-basis: 0支持不稳定，如需兼容，改用flex-basis: 0%或加 vendor 前缀
调试 flex 布局时，优先检查父容器是否设了 min-width / overflow
很多“flex-grow 不工作”的问题，根源不在子项，而在父容器：比如父容器有 min-width: 100% 但内容太短，导致 flex 计算时认为“没剩余空间”；或者父容器设了 overflow: hidden，掩盖了实际溢出，让人误以为布局失败。
错误现象：Chrome DevTools 里看到子项 computed 的 flex-grow 是 1，但宽度死活不变；或者在不同屏幕宽度下表现不一致。
- 临时加
outline: 1px solid red到父容器和每个子项，肉眼确认是否真有剩余空间 - 在 DevTools 中右键检查元素 → Computed → 拉到最底，看
flex-basis实际解析值是不是你预期的（比如写了0却显示auto） - 移动端 Safari 对
flex: 1在嵌套 flex 容器中偶有 bug，建议显式写全flex: 1 1 0
flex-grow 值设多少，而是没意识到它只对“剩余空间”起作用，以及 flex-basis 这个隐性起点到底被浏览器算成了什么。 
