Flex布局中flex-grow与flex-shrink解析

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《Flex布局中flex-grow与flex-shrink详解》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

flex-grow按比例分配剩余空间，flex-shrink控制溢出时的收缩比例，二者结合实现弹性布局。

在CSS Flex布局中，flex-grow 和 flex-shrink 是控制子元素如何分配容器剩余空间或应对空间不足的关键属性。它们不直接设置尺寸，而是定义伸缩行为，让布局更具弹性。

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

当Flex容器有剩余空间时，flex-grow 决定子元素的扩展比例。

默认值为0，表示不扩展。设为正整数时，按比例瓜分可用空间。

• 两个子项分别设置 flex-grow: 1 和 flex-grow: 2，容器剩余空间将按 1:2 分配。
• 所有子项都设为 flex-grow: 1，则平均分配剩余空间。

它只在主轴方向起作用，且前提是子项未占满容器。

flex-shrink：收缩以适应容器

当子元素总尺寸超过容器时，flex-shrink 控制它们的收缩比例。

默认值为1，表示可等比收缩。设为0则禁止收缩，可能造成溢出。

• 三个子项宽度各为200px，容器宽500px。总宽600px超出100px。
• 若它们的 flex-shrink 分别为 1、2、1，则按权重1:2:1共4份，各自收缩对应比例（25px、50px、25px）。

注意：收缩计算基于项目原始大小乘以 shrink 权重，不是简单等比压缩。

实际应用建议

这两个属性常与 flex-basis 一起使用，简写为 flex 属性。

• 希望某区域自适应宽度：设置 flex: 1，相当于 flex: 1 1 0% 或 flex: 1 1 auto，视情况而定。
• 固定侧边栏 + 自适应主内容：侧边栏 flex: 0 0 200px，主区 flex: 1。
• 防止文本被过度压缩：给文字容器设 flex-shrink: 0。

基本上就这些。理解 flex-grow 与 flex-shrink 的比例机制，能更精准地实现响应式弹性布局，避免依赖固定尺寸带来的适配问题。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Flex布局中flex-grow与flex-shrink解析》文章吧，也可关注golang学习网公众号了解相关技术文章。