flex-grow 不生效的根本原因是 flex-basis 默认为 auto，需设为 0 才能严格按比例分配；推荐写法是 flex: 1 0 0，IE11 下必须显式声明 flex-basis。
flex-grow 不生效？先确认 flex-basis 是 auto 还是 0
很多情况下 flex-grow 看似没起作用，其实是被 flex-basis 的初始值“锁住”了。默认 flex-basis 是 auto，它会先按元素内容宽度（或设了 width 的值）来占位，再把剩余空间按 flex-grow 分——这容易导致比例失真。
想严格按比例分配宽度，必须显式设 flex-basis: 0，让所有 flex 项起始“零宽度”，再由 flex-grow 完全主导分配逻辑。
-
flex-basis: auto→ 尊重内容宽 / width，再分剩余空间 -
flex-basis: 0→ 忽略原始尺寸，纯按flex-grow比例切分容器总宽 - 推荐写法：
flex: 1 0 0（即flex-grow: 1; flex-shrink: 0; flex-basis: 0）
用 flex 实现 2:3:5 的等比宽度布局
比如三个子项要占容器的 20%、30%、50%，不能靠百分比 width（响应性差），而应靠 flex-grow 比例 + flex-basis: 0。
.container { display: flex; } .item-1 { flex: 2 0 0; } .item-2 { flex: 3 0 0; } .item-3 { flex: 5 0 0; }这里数字 2/3/5 是相对权重，浏览器会自动归一化计算：2/(2+3+5)=20%，3/10=30%，依此类推。注意不要写成 flex-grow: 2px 或带单位的值——它只接受无单位数字。
立即学习“前端免费学习笔记（深入）”；
flex-basis 设为具体长度（如 100px）时会发生什么
一旦 flex-basis 是固定值（比如 100px），flex-grow 就只在“超出 100px 后的剩余空间”里起作用，不再是纯比例控制。
- 若容器宽 600px，三个项都设
flex: 1 0 100px→ 先各占 100px（共 300px），剩下 300px 再三等分 → 最终各 200px - 但若某项内容很长（比如文本撑到 150px），而
flex-basis: auto，它可能直接突破比例 → 此时flex-basis: 0才能强制“一切从零开始算” - 移动端常踩坑：图片或按钮自带固有宽，不设
flex-basis: 0就会破坏比例
IE11 兼容 flex-grow 比例分配的注意事项
IE11 对 flex-grow 支持基本可用，但有个关键限制：必须显式写 flex-basis，不能省略。只写 flex-grow: 2 在 IE11 下会被忽略。
- ✅ 安全写法：
flex: 2 0 0或flex-grow: 2; flex-shrink: 0; flex-basis: 0 - ❌ 危险写法：
flex-grow: 2单独使用（IE11 不识别） - 如果项目还需支持 IE11，建议统一用
flex简写，避免拆开写
真正难的不是写对语法，而是意识到：比例分配的前提是“起点一致”。只要有一个子项的 flex-basis 没归零，整个比例就可能悄悄偏移。