flex-grow生效需满足父容器display: flex且存在主轴剩余空间；flex-grow: 0不放大，1按比例瓜分剩余空间（flex-basis为0），auto是flex简写；推荐用flex简写控制整体行为。
flex-grow 就是干这个的：它控制子元素在父容器主轴剩余空间里的分配比例。
为什么设了 flex-grow 还不放大？
不是写错语法，而是布局前提没满足：
- 父容器没加
display: flex—— 浏览器直接忽略flex-grow - 所有子元素设置了固定
width（比如width: 200px），加起来 ≥ 父容器宽度 —— 根本没有“剩余空间”可分 - 子元素写了
min-width: 100%或white-space: nowrap，导致无法收缩，Flex 计算被阻断 - 父容器自身
width是auto（比如在普通 block 流中未设宽），结果 flex 容器只包裹内容，没留下可分配空间
调试时建议：给父容器加 border，子元素加 background 和 outline，用开发者工具看 computed 样式里 flex-grow 是否生效、flex-basis 是多少、剩余空间是否为正。
flex-grow: 0 / 1 / auto 的区别
这三个值行为差异极大，容易误用：
-
flex-grow: 0：完全不放大，宽度按内容或设定的width固定 -
flex-grow: 1：参与剩余空间分配，比例为 1；注意此时flex-basis默认是0，所以它是“从零开始”瓜分剩余空间 -
flex-grow: auto：这不是标准值！实际是flex: auto的简写，等价于flex: 1 1 auto，此时flex-grow是 1，但flex-basis变成auto（即按内容宽度占位），再把「超出父容器总和的部分」作为剩余空间来分
别单独用 flex-grow，优先写 flex 简写
flex-grow 几乎从不单独出现，因为它的效果严重依赖 flex-basis 和 flex-shrink。直接写 flex 更可控：
-
flex: 1→flex-grow: 1; flex-shrink: 1; flex-basis: 0（推荐用于等分剩余空间） -
flex: auto→flex-grow: 1; flex-shrink: 1; flex-basis: auto（适合内容宽度为主、再微调） -
flex: 0 1 auto→ 不放大，可缩小，初始宽度按内容（常用于导航项、按钮等）
真正容易被忽略的是：flex-basis 的默认值是 auto，但一旦你只写 flex-grow，flex-basis 就变成 0 —— 这个隐式切换会让布局突然“塌掉”或“撑满”，必须心里有数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
