17370845950

flex-grow控制子元素在容器有剩余空间时的扩展比例，默认为0不扩展，数值越大扩展越多；flex-shrink控制空间不足时的收缩能力，默认为1可收缩，值越大压缩越明显，常用于响应式布局调整。

在CSS的Flex布局中，flex-grow 和 flex-shrink 是控制弹性子元素如何分配容器内剩余空间或应对空间不足的核心属性。它们共同决定了子元素的伸缩行为，但作用方向相反。

flex-grow：控制子元素的扩展能力

当Flex容器中有多余空间时，flex-grow 决定子元素如何拉伸以填充这些空间。

• 默认值为0，表示不扩展。
• 设置为大于0的数值时，子元素将按比例分摊剩余空间。
• 例如：两个子元素分别设置 flex-grow: 1 和 flex-grow: 2，则后者将获得两倍于前者的扩展空间。

它适用于内容较少、希望填满容器的场景，比如导航栏均分布局或卡片自适应宽度。

flex-shrink：控制子元素的收缩能力

当Flex容器中的子元素总宽度超过容器容量时，flex-shrink 决定它们如何压缩以适应容器。

• 默认值为1，表示允许按比例收缩。
• 设置为0时，该元素不会被压缩，可能导致溢出。
• 值越大，收缩程度越明显。比如 flex-shrink: 3 的元素比 flex-shrink: 1 的压缩更多。

这个属性在处理长文本或固定尺寸内容时特别重要，避免内容被强制挤压变形。

实际应用中的常见组合

通常我们会使用 flex 简写属性来同时设置 grow、shrink 和 flex-basis。

• flex: 1 相当于 flex: 1 1 0%，可伸可缩，常用于等分布局。
• flex: 0 0 200px 表示不伸缩，固定宽度200px，适合固定尺寸模块。
• flex: 1 0 200px 表示只扩展不收缩，最小宽度200px，适合主内容区。

理解 flex-grow 与 flex-shrink 的区别，能更精准地控制布局响应性，避免内容重叠或空白过多。

基本上就这些，掌握这两个属性的行为逻辑，Flex布局会变得更可控、更灵活。