flex-grow计算公式为：当前项目获得空间 = (自身flex-grow / 所有兄弟flex-grow总和) × 剩余空间，其中剩余空间 = 容器主轴尺寸 − 所有子项flex-basis之和；该公式仅在flex-basis总和小于容器宽度时生效。
flex-grow 计算公式到底是什么
不是简单的“按数值等分容器宽度”，而是严格基于「剩余空间」和「相对权重」的加权分配。核心公式是：当前项目获得空间 = (自身 flex-grow / 所有兄弟 flex-grow 总和) × 剩余空间。其中「剩余空间」= 容器主轴尺寸 − 所有子项 flex-basis（或 width，当 flex-basis 为 auto 时）之和。
关键点在于：这个公式只在 flex-basis 总和 flex-grow 完全不触发——它管的是“多出来的”，不是“全部”。
flex-grow 总和小于 1 时怎么算
这是最容易被忽略的边界行为。当所有项目的 flex-grow 相加 0.1、0.2、0.3），浏览器不会用实际总和（0.6）作分母，而是强制用 1 代入计算。也就是说：
-
项目A获得空间 = 0.1 × 剩余空间（不是0.1 / 0.6 × 剩余空间） 项目B获得空间 = 0.2 × 剩余空间项目C获得空间 = 0.3 × 剩余空间- 剩下
0.4 × 剩余空间被直接丢弃，不分配给任何元素
这种设计初衷是允许用小数做“绝对比例控制”，但实际中极易导致空间浪费，调试时需特别注意开发者工具里是否真有未被填满的空白。
flex-basis 对计算结果的影响比 width 大得多
flex-basis 是 flex-grow 计算的起点，它优先级高于 width。只要 flex-basis 不是 auto，width 就会被忽略——哪怕你写了 width: 200px，同时又写了 flex-basis: 100px，最终参与计算的仍是 100px。
常见踩坑场景：
- 用
flex: 1时，等价于flex: 1 1 0，即flex-basis: 0→ 所有项目从 0 开始均分剩余空间，内容撑不开也不影响分配 - 想让项目按内容宽度起步再伸缩？必须显式写
flex-basis: auto，否则width不生效 - 混合使用
flex-basis和width时，用浏览器 DevTools 的 Layout 面板看 computed 值，确认真正起作用的是哪个
为什么 flex-grow: 1; flex-grow: 2; 看起来不是 1:2 分配
因为人眼看到的是「最终宽度」，而 flex-grow 只控制「额外增加的部分」。假设三个项目 flex-basis 分别是 100px、150px、80px，容器宽 600px，flex-grow 为 1、2、0：
- 剩余空间 =
600 − (100 + 150 + 80) = 270px - 总 grow 权重 =
1 + 2 + 0 = 3 - 项目1新增 =
270 × 1/3 = 90px→ 最终宽190px - 项目2新增 =
270 × 2/3 = 180px→ 最终宽330px - 项目3新增 =
0→ 最终宽仍为80px
最终宽度比是 190 : 330 : 80，远非直观的 1:2:0。要验证是否符合预期，得拆开看「基础尺寸」和「增长量」两部分，不能只盯最终像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
