当前位置：首页 > 文章列表 > 文章 > 前端 > Flex布局三属性解析：flex-growflex-shrinkflex-basis

Flex布局三属性解析：flex-growflex-shrinkflex-basis

2025-10-21 18:04:29 0浏览收藏

**CSS Flex布局详解：掌握flex-grow、flex-shrink、flex-basis属性** 在CSS Flexbox布局中，`flex-grow`、`flex-shrink`和`flex-basis`是控制Flex项目伸缩的关键属性。本文深入解析这三个属性的用法和相互作用，助你精准掌控Flex布局。`flex-grow`定义项目在容器有剩余空间时如何按比例放大，默认值为0，表示不放大。`flex-shrink`定义项目在超出容器时如何按比例缩小，默认值为1，表示可压缩。`flex-basis`设置项目在伸缩前的初始大小，优先级高于`width`。通过`flex`简写属性，可以一次性设置这三个属性，例如`flex: 1`等价于`flex: 1 1 0`，实现等分空间的效果。掌握这些属性的组合使用，能灵活应对各种弹性布局需求。

flex-grow、flex-shrink、flex-basis通过flex简写控制伸缩行为：flex-grow按比例分配剩余空间，默认0不放大；flex-shrink定义压缩比例，默认1可压缩，0不压缩；flex-basis设置主轴初始尺寸，优先级高于width。常用简写如flex:1（等分空间）、flex:0 1 auto（默认值）、flex:none（固定大小）。

css flex-grow flex-shrink flex-basis综合使用

在 CSS Flexbox 布局中，flex-grow、flex-shrink 和 flex-basis 是控制 flex 项目如何伸缩的关键属性。它们通常通过简写属性 flex 一起设置，理解它们的组合使用对精准布局至关重要。

flex-grow：分配剩余空间

定义项目在容器中有剩余空间时，按比例放大的能力。

• 默认值为 0，表示不放大。
• 设置为 1 或更大时，项目将按比例占据剩余空间。
• 多个项目设置不同值时，按数值比例分配空间。

例如：

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

容器剩余空间会按 1:2 分配给 item1 和 item2。

flex-shrink：压缩超出空间

定义当所有项目总尺寸超过容器时，项目缩小的比例。

• 默认值为 1，表示可等比压缩。
• 设置为 0 时，项目不压缩，可能溢出容器。
• 数值越大，压缩得越多。

例如：

.item1 { flex-shrink: 0; } /* 不压缩 */
.item2 { flex-shrink: 2; } /* 压缩程度是默认项的两倍 */

flex-basis：设置主轴基础尺寸

定义项目在伸缩前的初始大小，相当于“首选宽度”（对 row 布局而言）。

• 可设为具体值如 100px、20% 等。
• 设为 auto 时，大小由 width 或内容决定。
• 设为 0 时，空间完全由 flex-grow 分配。

注意：flex-basis 优先级高于 width。

flex 简写语法：推荐用法

实际开发中，一般使用 flex 简写来同时设置三个属性：

flex: [flex-grow] [flex-shrink] [flex-basis];

• flex: 1 等价于 flex: 1 1 0；项目可伸可缩，基础大小为 0。
• flex: 0 1 auto 是默认值，不放大，可缩小，大小基于内容。
• flex: none 等价于 flex: 0 0 auto；完全不伸缩。
• flex: 2 1 150px 表示放大比例 2，可缩小，初始宽 150px。

常见场景：

• 均分空间：父容器 display: flex; 子项 flex: 1；
• 固定宽 + 自适应：一个 item flex: 1；另一个 width: 200px 或 flex: 0 0 200px；
• 两栏自适应 + 一栏固定：两侧 flex: 1；中间 flex: 0 0 300px；

基本上就这些。掌握 flex 的三属性组合，能让你灵活应对大多数弹性布局需求。关键是理解每个属性的作用和默认行为，避免依赖猜测。

好了，本文到此结束，带大家了解了《Flex布局三属性解析：flex-growflex-shrinkflex-basis》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！