flex-grow未按比例分配的根本原因是默认flex-basis:auto使子项先按内容宽度占位，需统一设为0（如flex:1 1 0）并排除min-width:auto等干扰。
flex-grow 设了却没按比例分，问题出在 flex-basis 上
根本原因不是 flex-grow 失效，而是它只分配「剩余空间」，而默认 flex-basis: auto 会让每个子项先按自身内容宽度占位——文字多的起点宽，自然分得更多。比如容器宽 600px，两个子项内容宽分别是 80px 和 240px，都设 flex-grow: 1，结果不是各 300px，而是约 220px 和 380px。
真正起作用的公式是：最终宽度 = flex-basis（或内容宽） + 分得的剩余空间。想让比例纯粹，必须让所有子项从同一基准出发。
推荐写法：flex: 1 1 0（即 flex-grow: 1、flex-shrink: 1、flex-basis: 0）。注意是无单位的 0，不是 0px 或 0%；后者在旧版 Safari 中可能被误解析。
为什么写了 flex: 1 1 0 还是不等宽？查这些隐形干扰
即使显式设了 flex-basis: 0，仍可能失效，常见干扰项包括：
立即学习“前端免费学习笔记（深入）”；
- 子项内有
<img alt="如何在CSS中让Flex子元素按比例分配剩余空间？" >、<input>等替换元素，默认带min-width: auto，需额外加min-width: 0 - 子项设置了
width、min-width或max-width—— 它们会覆盖flex-basis - 父容器没设明确
width，或被float、position: absolute干扰，导致“剩余空间”无法计算 - 用了
gap却又给子项加了margin，总宽超限，触发flex-shrink而非flex-grow - 子项
padding不一致 ——flex-grow分配的是 content box 宽度，padding仍计入总宽
按 1:2:3 这类非等比分配，怎么写才可靠
比例生效的前提仍是统一起点。例如三列按 1:2:3 分配：
.container { display: flex; }
.item1 { flex: 1 1 0; }
.item2 { flex: 2 1 0; }
.item3 { flex: 3 1 0; }
此时剩余空间被分为 6 份，三项分别拿 1/6、2/6、3/6。关键点：
-
flex-grow只看比值，flex: 2 1 0和flex: 4 1 0效果相同 - 若某项需固定宽度（如侧边栏 200px），用
flex: 0 0 200px，其余项再用flex: 1 1 0自适应 - 禁止收缩场景（如导航栏），改用
flex: 1 0 0，避免小屏下被压缩
垂直方向填不满？主轴和高度链都要对
水平方向常能“蒙对”，垂直方向更容易翻车。因为 flex-grow 在纵向上依赖父容器有明确高度，且子项不能被 height、min-height 或内容撑开。
常见失败链：
- 父容器没设
height或min-height→ 剩余空间为 0 - 子项含长文本且
white-space: nowrap→ 强制突破flex-basis起点 - 外层是
display: table或position: relative嵌套，限制了主轴可用空间
调试建议：Chrome DevTools → Layout 面板 → 勾选 “Flexbox overlay”，能直观看到各子项的基线与剩余空间分配线。
最易被忽略的是：flex 分配逻辑本身不关心“视觉占比”，只算主轴上的数值差。内容、盒模型、父级约束任何一个环节没对齐，比例就立刻失真。
