flex-grow 控制子项按比例分配容器剩余空间的能力，值为无单位非负数，默认0；它与flex-basis配合决定放大起点，推荐用flex简写形式实现均分、内容优先或不等比分配。
flex-grow 控制的是子项在容器有剩余空间时，按比例瓜分这部分空间的能力。它不改变元素原始尺寸，只决定“多出来的空间怎么分”。关键不是设多少，而是各子项之间的比例关系。
flex-grow 的基本行为
它是一个无单位的非负数字，默认值是 0。值为 0 表示完全不参与剩余空间分配；大于 0 的值代表相对权重。
- 所有子项 flex-grow 都为 0 → 剩余空间被忽略，子项保持自身宽度（或 flex-basis 指定的基准宽）
- 只有一个子项 flex-grow: 1，其余为 0 → 该子项独占全部剩余空间
- 两个子项分别为 flex-grow: 2 和 flex-grow: 1 → 剩余空间按 2:1 分配，前者得三分之二，后者得三分之一
flex-grow 和 flex-basis 的配合关系
flex-grow 不是单独起作用的。它的放大起点，取决于 flex-basis 的值。默认情况下 flex-basis 是 0%，所以 flex-grow: 1 的元素相当于“从 0 宽度开始，按比例抢空间”。
- 如果写
flex-grow: 1，没设 flex-basis → 实际等价于flex: 1 1 0% - 如果希望先按内容宽度占位，再分剩余空间，应显式设
flex-basis: auto或用flex: auto - 例如：
flex: 1≠ 内容自适应，而是强制从 0 开始拉伸；flex: auto才会先尊重文字/图片宽度，再扩展
常见误区与写法对比
容易混淆的是 flex-grow: 1、flex-grow: 0 和 flex: auto 这三者。
-
flex-grow: 0：严格固定尺寸，哪怕父容器很宽也不变 -
flex-grow: 1：放弃原有宽度，和其他同为 1 的兄弟均分所有剩余空间 -
flex: auto：先按内容撑开（flex-basis: auto），再把「超出父容器总和的部分」作为新剩余空间来分配
实际应用建议
多数布局场景中，推荐用简写形式代替单独设置 flex-grow，更可控也更直观。
- 要均分剩余空间：直接写
flex: 1（适用于导航栏菜单、卡片栅格等） - 要内容优先、再弹性扩展：用
flex: auto（适合文字块、按钮组） - 要做不等比分配：比如侧边栏 2 份 + 主内容区 5 份 →
sidebar { flex: 2 }、main { flex: 5 } - 避免混用
width和flex-grow：width 会被 flex-basis 覆盖，容易导致意外交互
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
