CSS flex-grow与flex-shrink实现自适应布局

CSS 中的 flex-grow 和 flex-shrink 是 Flexbox 布局中实现真正自适应、响应式设计的核心利器：前者让元素智能抢占剩余空间（如内容区自动填满侧边栏后的空白），后者则精准控制空间不足时的收缩行为（如锁定输入框宽度避免被压缩），配合 flex 简写（如 flex:1 或 flex:1 0 auto）和 min-width:0 等实用技巧，无需固定尺寸或媒体查询，就能构建出流动自然、跨设备稳健的弹性布局。

在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应容器空间的核心属性。它们能帮助你实现灵活、自适应的布局，无需固定宽度或媒体查询就能响应不同屏幕尺寸。

flex-grow：定义项目的扩展能力

当容器有剩余空间时，flex-grow 决定子元素如何分配这些额外空间。

默认值为 0，表示不扩展。设置为大于 0 的数值时，项目将按比例扩展。

• flex-grow: 1：该项目会占据所有可用的剩余空间
• flex-grow: 2 vs flex-grow: 1：前者将获得两倍于后者的扩展空间

常见用法：让某个区域（如内容区）自动填满剩余空间。

.container {
  display: flex;
}
.sidebar {
  width: 100px;
  flex: 0 0 auto; /* 不伸缩 */
}
.main-content {
  flex-grow: 1; /* 自动撑满剩余空间 */
}

flex-shrink：定义项目的收缩能力

当容器空间不足时，flex-shrink 控制子元素是否以及如何缩小。

默认值为 1，表示允许按比例缩小。设为 0 时，项目不会被压缩，可能溢出容器。

• 三个子项宽度各为 200px，容器宽 500px —— 总内容超出 100px
• 若都设置 flex-shrink: 1，则每个项目等比缩小约 33.3px
• 若某项 flex-shrink: 0，则它保持 200px，其余两项承担全部压缩量

实用场景：防止文本区域被过度压缩而影响阅读。

.input-group {
  display: flex;
}
.label {
  flex: 0 0 80px; /* 固定宽度，不伸缩 */
}
.input-field {
  flex-grow: 1;
  flex-shrink: 0; /* 禁止收缩，保证输入空间 */
}

结合使用：flex 简写更高效

实际开发中，推荐使用 flex 简写属性来同时设置 grow、shrink 和基础尺寸。

• flex: 1 等价于 flex: 1 1 0% —— 可伸可缩，基础尺寸从 0 开始
• flex: 0 1 200px —— 不扩展，可收缩，基础宽度 200px
• flex: 1 0 auto —— 可扩展，不可收缩，基于内容大小开始

技巧：设置 min-width: 0 可解决某些情况下 flex-shrink 失效的问题，尤其是内部内容较长时。

基本上就这些。合理搭配 flex-grow 与 flex-shrink，能让布局真正“流动”起来，在各种设备上自然适配。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~