flex-grow未生效最常见原因是父容器未设display: flex或子元素被min-width: auto锁死宽度导致无剩余空间；需统一设flex-basis: 0并确保父容器有明确高度才能按比例分配。
flex-grow 为什么设了却没分到空间
最常见的情况是：父容器没设 display: flex，或者子元素被 min-width: auto（比如图片、输入框、文字不换行）锁死宽度，导致“剩余空间”为 0。浏览器计算逻辑是：先按 flex-basis（默认 auto）排一遍，再把剩下的空间按 flex-grow 分——如果每项都按内容占了 100% 容器宽，那就根本没“剩余”可分。
检查步骤建议：
- 用开发者工具看子项的
computed width和min-width，确认是否被撑开 - 临时加
min-width: 0或overflow: hidden测试是否松动 - 确认父容器没设
flex-wrap: wrap，否则换行后主轴空间重算，flex-grow行为可能意外失效
flex-grow 必须配合 flex-basis 才能按比例生效
flex-grow 不是百分比，也不是固定宽度，它只决定「剩余空间」怎么分。而这个“剩余”的起点，由 flex-basis 决定。默认 flex-basis: auto 意味着每个子项先按自身内容宽度占位——文字多的项起点就宽，自然分得更多，比例就乱了。
真正按比例分配的写法是统一设 flex-basis 为 0：
-
flex: 1 1 0→ 等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0 -
flex: 2 1 0→ 起点为 0，拿走两份剩余空间 - 注意是无单位的
0，不是0px或0%；后者在旧版 Safari 中可能被误解析
按 1:2:3 这类非等比分配时容易踩的坑
比例成立的前提是所有项从同一基准出发。比如三列要按 1:2:3 分配，必须都设 flex-basis: 0，否则比例会被初始尺寸污染。
示例写法：
.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 失效的典型链路
水平方向常能“蒙对”，垂直方向更容易翻车，因为 flex-grow 在纵向上依赖两个条件同时满足：父容器有明确高度（height 或 min-height），且子项不能被自身 height、min-height 或内容撑开。
常见失败链：
- 父容器没设
height或min-height→ 剩余空间为 0 - 子项内有
→ 默认带min-width: auto和min-height: auto，需额外加min-height: 0 - 用了
gap却又给子项加margin→ 总高超限，触发flex-shrink而非flex-grow
真正难的从来不是写对那几行 CSS，而是意识到 flex-grow 的每一次计算，都建立在整条布局链上每个环节都没被隐形约束卡住——尤其是那些浏览器自动加上的 min-width: auto 和未声明的 height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
