flex-grow 分配的是剩余空间，需配合 flex-basis: 0 才能实现精确比例；正确写法用 flex: grow shrink basis，如 flex: 2 1 0；注意 min/max-width 限制及调试时启用 Flexbox overlay 查看分配效果。
flex-grow 不是直接决定“占多少百分比”，而是控制“剩余空间怎么分”。想让比例准确生效，关键不在 grow 值本身，而在它和 flex-basis 的配合。
先搞清 flex-grow 真正分的是什么
它只分配「剩余空间」——也就是父容器总宽减去所有子项初始宽度后的空余部分。这个初始宽度由 flex-basis 决定，默认是 auto（即按内容宽度）。所以：
- 如果两个子项内容宽度分别是 60px 和 180px，容器宽 600px，都设 flex-grow: 1，剩余空间只有 360px，它们各加 180px → 最终宽为 240px 和 360px，不是等宽
- 只有把 flex-basis 统一设为 0，初始宽度才都是 0，剩余空间才是完整的 600px，再按权重分，结果才符合预期
按比例缩放的正确写法
要实现严格 2:3 或 1:1:2 这类比例，必须显式控制起点和权重：
- 用 flex 简写最稳妥：比如
flex: 2 1 0表示 flex-grow: 2、flex-shrink: 1、flex-basis: 0 - 避免只写
flex-grow: 2，否则 flex-basis 仍为 auto，内容宽度会干扰比例 - 三个子项按 1:2:3 分配 → 分别设
flex: 1 1 0、flex: 2 1 0、flex: 3 1 0，最终宽度就是总宽的 1/6、2/6、3/6
容易踩坑的细节
光设对 flex-basis 和 flex-grow 还不够，这些限制条件会中途截断分配过程：
-
min-width 会卡住下限：某项设了
min-width: 200px，但按比例只该分到 150px，它仍占 200px，多出的 50px 从别人那儿扣 -
max-width 会封顶：某项权重高本该分 300px，但
max-width: 120px，那它最多 120px，溢出空间重新分给其余项 - 含图片或长英文单词的子项，记得加
min-width: 0，否则浏览器默认按固有尺寸锁死，flex-shrink 都不触发
调试时怎么看实际分配效果
打开 Chrome 或 Edge 的开发者工具，进入「Layout」面板，勾选「Flexbox overlay」。画面上会实时标出：
- 每个子项的 flex-basis 基线（虚线）
- 剩余空间范围（浅色区域）
- 各子项实际伸缩后的边界
一眼就能看出是内容撑开了，还是 flex-grow 没生效，还是被 min/max 卡住了。
