首页 > 文章 > 前端

Flex-grow和flex-shrink全面解析

时间：2025-11-26 14:25:32 109浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《Flex-grow与flex-shrink详解》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

flex-grow定义项目在有剩余空间时的扩展比例，默认0不扩展，大于0按比例分配；flex-shrink定义空间不足时的收缩能力，默认1可收缩，数值越大收缩越多，常与flex-basis结合通过flex简写设置，实现自适应布局。

css Flexbox伸缩属性flex-grow与flex-shrink

在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应容器空间的重要属性。它们共同决定了弹性项目在主轴方向上的尺寸变化行为。

该属性决定一个弹性项目在有剩余空间时，能分配到多少比例的额外空间。

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

示例：

假设容器宽度为 500px，两个子项原始宽度各为 100px，总占 200px，剩余 300px。若两者 flex-grow 都设为 1，则平分剩余空间，各得 150px，最终宽度为 250px。

当所有子项的总宽度超过容器时，该属性决定项目被压缩的程度。

• 默认值为 1，表示可正常收缩。 • 设为 0 表示不收缩，即使超出容器也不缩小。 • 数值越大，收缩程度越高。例如 flex-shrink: 2 的项目比 flex-shrink: 1 的项目缩得更多。

注意：实际收缩量不仅取决于 flex-shrink 值，还与项目本身的基准尺寸（flex-basis 或 width）有关。

通常我们不会单独写 flex-grow 和 flex-shrink，而是通过简写属性 flex 来同时设置。

• flex: 1 等价于 flex: 1 1 0% （常用于等分布局） • flex: 2 1 0% 表示 grow=2, shrink=1, basis=0% • flex: none 表示不伸缩，等价于 flex: 0 0 auto

合理设置这两个属性，可以实现灵活、自适应的布局效果，比如导航栏均分、侧边栏固定主内容区自适应等场景。

基本上就这些，掌握 flex-grow 和 flex-shrink 的比例机制，就能更精准控制 Flexbox 中的空间分配。

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