flex-grow 是 css flexbox 布局中控制子元素在主轴方向按比例分配剩余空间的属性，需父容器设 display: flex 且存在未被占满的剩余空间才生效。
flex-grow 不是 HTML 属性，它是 CSS 的 Flexbox 布局属性，必须写在 CSS 中作用于 flex 项目（即 display: flex 容器的直接子元素）。
flex-grow 是什么、怎么写才生效
它控制 flex 项目在主轴方向上「剩余空间」的分配比例。只有当父容器设了 display: flex 或 display: inline-flex，且子元素未被撑满时，flex-grow 才起作用。
常见错误写法：
<div style="flex-grow: 1">错！没设 display: flex</div>
正确写法示例：
<div style="display: flex"> <div style="flex-grow: 2">占 2 份</div> <div style="flex-grow: 1">占 1 份</div> </div>
-
flex-grow默认值是0，表示不放大（即使有剩余空间也不分） - 值只能是无单位数字（如
0、1、2.5），不能写1px或100% - 负值非法，会被忽略
flex-grow: 0 / 1 / auto 的区别
这三个常用值行为差异很大，容易混淆：
-
flex-grow: 0：完全不放大，宽度按内容或设定的width固定 -
flex-grow: 1：参与剩余空间分配，比例为 1 -
flex-grow: auto：不是标准值！实际是flex: auto的简写，等价于flex: 1 1 auto，此时flex-grow是1，但flex-basis变成auto（即按内容宽），不是0
关键点：flex-grow 单独用时，flex-basis 默认是 0，所以 flex-grow: 1 的元素会“从零开始”瓜分剩余空间；而 flex: auto 下，它先按内容宽度占位，再把「超出父容器总和的部分」作为剩余空间来分。
为什么设了 flex-grow 还不放大？常见卡点
最常遇到的不是语法错，而是布局前提不满足：
- 父容器没设
display: flex——flex-grow直接被浏览器忽略 - 所有子元素设置了固定
width且加起来 ≥ 父容器宽度 —— 没有「剩余空间」可分 - 子元素用了
min-width: 100%或white-space: nowrap导致无法收缩，进而影响 flex 计算逻辑 - 父容器 width 为
auto（比如在 block 流中未设宽），flex 容器自身宽度可能只包裹内容，没留下可分配空间
调试建议：给父容器加个 border，子元素加 background 和 outline，用浏览器开发者工具看 computed 样式里 flex-grow 是否生效、flex-basis 是多少、剩余空间是否为正。
和 flex: 1 / flex: auto / flex: 0 1 auto 的关系
flex-grow 几乎从不单独使用，它通常和 flex-shrink、flex-basis 一起由 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-grow: 0; flex-shrink: 1; flex-basis: auto
注意：flex: 1 和 flex-grow: 1 表现不同——前者让元素从 0 宽起步均分空间，后者若和其他 flex 属性共存（比如写了 width），结果可能意外。线上项目建议优先用 flex 简写，语义更完整，也避免遗漏 flex-shrink 导致溢出。
真正需要精细控制放大比例时，别只调 flex-grow，顺手检查 flex-basis 和父容器的可用宽度——那才是 flex 计算的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
