CSS弹性布局：flex-grow与flex-shrink详解

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

flex-grow决定子元素扩展比例，flex-shrink控制收缩比例，两者结合flex-basis通过flex简写设置，实现响应式布局。

弹性盒子布局（Flexbox）是CSS中一种强大的布局模型，特别适合在容器内对子元素进行灵活的尺寸分配与对齐。其中 flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应可用空间的关键属性。

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

当容器中有剩余空间时，flex-grow 决定子元素按比例扩展的程度。默认值为 0，表示不扩展。

例如：

此时，.item2 将获得两倍于 .item1 或 .item3 的额外空间。三者按 1:2:1 的比例分配剩余空间。

如果所有项目的 flex-grow 都设为 1，则它们均分剩余空间，实现等宽自适应布局。

理解 flex-shrink：压缩避免溢出容器

当子元素总宽度超过容器时，flex-shrink 控制它们如何收缩。默认值为 1，表示允许按比例缩小。

示例：

总宽度 400px 超出容器 100px。由于 .item2 的 flex-shrink 是 .item1 的两倍，它将被压缩得更多，减少的空间按 1:2 比例分摊。

若设置 flex-shrink: 0，则该项目不会被压缩，保持原始尺寸（可能造成溢出）。

结合使用 flex-grow 与 flex-shrink

这两个属性常与 flex-basis 一起使用，通过 flex 简写属性统一设置。

比如：

这等价于：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 200px

表示项目从 200px 开始，可放大也可缩小，适合用于卡片、导航项等需要响应式调整的场景。

基本上就这些。掌握 flex-grow 和 flex-shrink 的比例机制，能让你更自如地构建动态、响应式的 Flexbox 布局。不复杂但容易忽略细节。

今天关于《CSS弹性布局：flex-grow与flex-shrink详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！