flex-grow 弹性增长属性

最后更新：2026-09-13

flex-grow flex-grow 弹性增长属性

flex-grow 属性用于设置弹性项目的放大比例，决定当容器有剩余空间时，该项目能分配到多少额外空间。它的默认值为 0，表示不放大，项目保持原始尺寸。数值越大，项目在剩余空间中所占的份额就越大，所有项目的 flex-grow 值按比例分配剩余空间。

分类
初始值	0
继承	否
适用于	flex-items
可动画	number
CSS 版本	CSS3
状态	标准

📝 语法

flex-grow: <number>;

⚙️ 取值

值	类型	描述
`<number>`	类型	弹性增长比例，0 表示不增长

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
flex-grow	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
所有主流浏览器均支持

提示： flex-grow 的值是无单位的比例值，不接受负值。剩余空间按各项目 flex-grow 值的比例分配，例如 1:2:3 表示三个项目按 1/6、2/6、3/6 分配空间。

注意： flex-grow 只在容器存在剩余空间时才生效。如果项目总宽度已超过容器宽度，flex-grow 不会让项目缩小，需要配合 flex-shrink 使用。

❓ 常见问题

Qflex-grow 可以为小数吗？

A可以。flex-grow 接受任何非负数（含小数），例如 flex-grow: 0.5 合法。剩余空间按各子项 flex-grow 值的相对比例分配，因此 0.5 和 1 的组合效果与 1 和 2 完全一致，比例才是关键。想要子项略微伸展但又不成倍放大时，用 0.5、0.3 这类小数很方便。

Q为什么设置了 flex-grow 但项目没有变大？

A常见原因有：容器没有剩余空间（子项总宽已占满容器）、父容器忘了写 display: flex、flex-basis 为 auto 且子项内容已把基础尺寸撑到最大。先确认容器宽度是否大于子项总宽度，再检查 flex-basis：想让 flex-grow 完全接管分配，通常把 flex-basis 设为 0。

Qflex-grow 分配的是“剩余空间”而不是“全部宽度”，这句话怎么理解？

Aflex 先按 flex-basis（默认 auto，即内容宽度）摆放所有子项，剩下的才叫剩余空间，由 flex-grow 按比例瓜分。例如容器 600px、三个子项内容共 300px，剩余 300px 才按比例分配。所以默认时 flex-grow: 1 不会等宽，除非 flex-basis 设为 0。