css flex-grow与flex-shrink区别详解

flex-grow在空间过剩时按比例分配剩余空间，flex-shrink在空间不足时按项目原始尺寸加权收缩以适应容器，两者分别控制扩展与压缩行为。

在 CSS Flexbox 布局中，flex-grow 和 flex-shrink 是控制弹性项目如何分配容器内剩余空间或应对空间不足的关键属性。它们虽然都影响项目的尺寸变化，但作用方向和触发条件完全不同。

flex-grow：扩展以填充多余空间

flex-grow 定义了弹性项目在容器有额外空间时，能够“拉伸”占用剩余空间的比例。

• 默认值为 0，表示不扩展。
• 设置为大于 0 的数值时，项目将按比例分摊容器的剩余空间。
• 分配方式基于所有项目的 flex-grow 值比例计算。

例如，两个项目分别设置 flex-grow: 1 和 flex-grow: 2，那么剩余空间将按 1:2 的比例分配，后者获得两倍于前者的扩展空间。

flex-shrink：收缩以适应不足空间

flex-shrink 控制当弹性项目总尺寸超过容器时，项目如何“压缩”以避免溢出。

立即学习“前端免费学习笔记（深入）”；

• 默认值为 1，表示允许收缩。
• 值越大，项目被压缩的程度越高。
• 收缩量不仅取决于 flex-shrink 值，还与项目原始大小有关（加权计算）。

比如一个项目内容宽 200px，另一个宽 100px，都设置了 flex-shrink: 1，当空间不足时，前者会比后者多“让出”更多空间，因为它的基础尺寸更大。

关键区别总结

• flex-grow 在空间过剩时起作用，决定谁“多吃”空间。
• flex-shrink 在空间不足时生效，决定谁“少吃”以适应布局。
• grow 按比例分配的是“多出来的”，shrink 按加权比例收回“超出的部分”。
• 两者可单独使用，也可结合 flex-basis 通过 flex 简写统一设置。

基本上就这些。理解它们的作用时机和计算逻辑，就能更精准地控制 Flex 项目的动态尺寸行为。