如何用css flex-grow与flex-shrink实现伸缩布局

flex-grow决定剩余空间分配比例，flex-shrink控制溢出时的压缩比例，二者结合flex-basis通过flex简写灵活布局，核心是理解空间的分配与压缩机制。

在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何伸缩以适应容器空间的核心属性。它们和 flex-basis 一起构成了 flex 的简写语法。下面直接说明这两个属性的实际作用和用法。

flex-grow：决定“剩余空间”如何分配

当 flex 容器中有剩余空间时，flex-grow 决定各个子项能分到多少额外空间。

默认值是 0，表示不放大。设置为大于 0 的数值时，子项将按比例分配剩余空间。

• 两个子项，flex-grow 分别为 1 和 1：平分剩余空间
• 一个设为 2，另一个为 1：前者拿 2/3，后者拿 1/3

代码示例：

立即学习“前端免费学习笔记（深入）”；

.container {
  display: flex;
}
.item1 { flex-grow: 2; }
.item2 { flex-grow: 1; }

此时 .item1 的宽度会是 .item2 的两倍（前提是 flex-basis 相同）。

flex-shrink：决定“空间不足”时如何收缩

当所有子项的总宽度超过容器时，浏览器需要压缩它们。flex-shrink 控制压缩的比例。

默认值是 1，表示可等比缩小。设为 0 表示不收缩。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

收缩不是简单按比例，而是结合项目原本尺寸（content + flex-basis）来计算“权重”。flex-shrink 越大，被压缩得越多。

• flex-shrink: 0 —— 不允许缩小，可能溢出容器
• flex-shrink: 2 —— 比值为 1 的元素多缩一半

示例：

.item1 { flex-basis: 200px; flex-shrink: 1; }
.item2 { flex-basis: 300px; flex-shrink: 2; }

当空间不足时，.item2 因其更大的 flex-shrink 和更宽的基础尺寸，会被压缩得更多。

常用简写：flex

实际开发中，通常使用 flex 简写属性来同时设置 grow、shrink 和 basis。

• flex: 1 等价于 flex: 1 1 0% —— 可伸可缩，基础宽度从 0 开始
• flex: 0 1 auto —— 不放大，可缩小，基于内容宽度
• flex: none —— 完全不伸缩，等价于 flex: 0 0 auto

推荐根据需求选择合适的简写，避免单独写 grow/shrink 导致 basis 不明确。

基本上就这些。掌握 flex-grow 和 flex-shrink 的比例思维，再结合 flex-basis 或简写的 flex，就能灵活控制布局的弹性行为。关键是理解“剩余空间怎么分”和“超了怎么压”。

以上就是如何用css flex-grow与flex-shrink实现伸缩布局的详细内容，更多请关注php中文网其它相关文章！