如何通过css flex-grow flex-shrink flex-basis组合控制布局-css教程-PHP中文网

flex-grow、flex-shrink、flex-basis共同控制Flexbox子项的伸缩行为：flex-basis设定初始尺寸，flex-grow决定剩余空间的放大比例，flex-shrink定义空间不足时的缩小比例，三者通过flex简写属性协同工作，实现灵活的响应式布局。

如何通过css flex-grow flex-shrink flex-basis组合控制布局

CSS中的

flex-grow

登录后复制

、

flex-shrink

登录后复制

和

flex-basis

登录后复制

这三个属性，就像是Flexbox布局里，我们分配空间和应对尺寸变化的“指挥棒”。它们共同决定了一个弹性子项（flex item）在容器中如何根据可用空间进行伸缩和占据初始尺寸。简单来说，

flex-basis

登录后复制

设定了它“理想”的初始大小，而当空间不足时，

flex-shrink

登录后复制

决定它如何“委屈”自己缩小；当空间有余时，

flex-grow

登录后复制

则让它“放开手脚”去扩展。它们协同工作，让布局在不同屏幕尺寸下都能灵活自如地调整。

解决方案

要真正掌握

flex-grow

登录后复制

、

flex-shrink

登录后复制

和

flex-basis

登录后复制

，我们得把它们拆开来看，然后理解它们如何相互作用。在我看来，这三者是Flexbox弹性布局的核心，理解了它们，你对很多复杂的布局场景就能游刃有余。

```
flex-basis
```
登录后复制
：初始尺寸的“意愿”
- 这个属性定义了flex item在沿着主轴（main axis）方向上的初始大小。你可以把它想象成在任何伸缩行为发生之前，这个元素“希望”自己有多大。
- 如果
```
flex-direction
```
  登录后复制
  是
```
row
```
  登录后复制
  （行），
```
flex-basis
```
  登录后复制
  控制的是宽度；如果是
```
column
```
  登录后复制
  （列），它控制的就是高度。
- 常见的值有像素（
```
px
```
  登录后复制
  ）、百分比（
```
%
```
  登录后复制
  ）、
```
em
```
  登录后复制
  、
```
rem
```
  登录后复制
  等，以及两个特殊关键字：
  - ```
  auto
```
  登录后复制
  ：这是默认值。这意味着flex item的初始大小会根据其
```
  width
```
  登录后复制
  /
```
  height
```
  登录后复制
  属性来决定，如果
```
  width
```
  登录后复制
  /
```
  height
```
  登录后复制
  也没设置，就根据内容大小来。
- ```
content
```
    登录后复制
    ：这个值会根据flex item的内容大小来计算其
```
flex-basis
```
    登录后复制
    。
- 我个人在实践中，如果想让元素在伸缩前有一个明确的起点，通常会给一个固定的
```
px
```
  登录后复制
  值，或者
```
0
```
  登录后复制
  （特别是当所有元素都需要等比例瓜分剩余空间时）。
```
flex-grow
```
登录后复制
：空间有余时的“贪婪”

立即学习“前端免费学习笔记（深入）”；
- 当flex容器内有额外空间时，
```
flex-grow
```
  登录后复制
  决定了flex item如何去“瓜分”这些空间。
- 它的值是一个无单位的数字，表示伸展的比例。默认值是
```
0
```
  登录后复制
  ，意味着元素不会增长。
- 举个例子，如果两个flex item都有
```
flex-grow: 1;
```
  登录后复制
  ，它们会平分所有额外的空间。如果一个有
```
flex-grow: 1;
```
  登录后复制
  ，另一个有
```
flex-grow: 2;
```
  登录后复制
  ，那么第二个元素会获得第一个元素两倍的额外空间。
- 这个属性在实现响应式布局，尤其是等宽或按比例分配宽度的场景下，简直是神器。
```
flex-shrink
```
登录后复制
：空间不足时的“妥协”
- 当flex容器内空间不足，导致flex item会溢出时，
```
flex-shrink
```
  登录后复制
  决定了flex item如何“收缩”自己以适应容器。
- 同样，它的值也是一个无单位的数字，表示收缩的比例。默认值是
```
1
```
  登录后复制
  ，意味着元素会收缩。
- ```
flex-shrink: 0;
```
  登录后复制
  是一个非常重要的用法，它表示这个元素绝对不会收缩，会保持其
```
flex-basis
```
  登录后复制
  （或内容/
```
width
```
  登录后复制
  ）定义的尺寸。这在需要固定尺寸的元素（比如导航栏中的Logo、侧边栏）上非常有用，可以防止它们被挤压变形。
- 收缩的计算比增长稍微复杂一点，它会考虑每个元素的
```
flex-basis
```
  登录后复制
  乘以
```
flex-shrink
```
  登录后复制
  的值来决定收缩的“权重”。

组合使用：

flex

登录后复制

简写属性

这三个属性通常会通过

flex

登录后复制

简写属性一起设置：

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

登录后复制

例如：
```
flex: 1 1 auto;
```
登录后复制
（默认值，可伸可缩，基于内容或
```
width
```
登录后复制
）
例如：
```
flex: 0 0 200px;
```
登录后复制
（固定200px宽，不伸不缩）
例如：
```
flex: 1;
```
登录后复制
（这是
```
flex: 1 1 0%;
```
登录后复制
的简写，非常常用，表示元素可伸可缩，且在伸缩前没有固定尺寸，会尽可能占用空间）
例如：
```
flex: auto;
```
登录后复制
（这是
```
flex: 1 1 auto;
```
登录后复制
的简写）
例如：
```
flex: none;
```
登录后复制
（这是
```
flex: 0 0 auto;
```
登录后复制
的简写，不伸不缩，基于内容或
```
width
```
登录后复制
）

我的经验是，理解了这三个参数的含义，再用

flex

登录后复制

简写，会清晰很多。特别是当你在调试布局时，单独调整

flex-grow

登录后复制

、

flex-shrink

登录后复制

、

flex-basis

登录后复制

，能让你更直观地看到每个参数的影响。

flex-basis和width/height有什么区别？

这个问题我被问过好多次，也是初学者经常感到困惑的地方。在我看来，

flex-basis

登录后复制

和

width

登录后复制

height

登录后复制

在Flexbox布局中扮演的角色确实有重叠，但它们的优先级和作用场景是不同的。

width

登录后复制

和

height

登录后复制

是CSS中传统的尺寸属性，它们定义了一个元素的固有、绝对的尺寸。当一个元素不是flex item时，或者它在flex容器中的主轴方向不是由

flex-basis

登录后复制

控制时（比如

flex-direction: column

登录后复制

时你设置

width

登录后复制

），

width

登录后复制

height

登录后复制

会直接生效。

然而，当一个元素成为flex item，并且

flex-basis

登录后复制

被明确设置时，

flex-basis

登录后复制

会优先于

width

登录后复制

（如果

flex-direction

登录后复制

是

row

登录后复制

）或

height

登录后复制

（如果

flex-direction

登录后复制

是

column

登录后复制

）。你可以这样理解：

flex-basis

登录后复制

是告诉Flexbox布局算法，“嘿，在计算伸缩之前，我希望这个元素的主轴尺寸是这个值。”而

width

登录后复制

height

登录后复制

则更像是一个“备用方案”或者“非flexbox场景下的默认值”。

举个例子，如果你有一个div设置了

width: 300px;

登录后复制

，但同时它又是flex item，并且你给它设置了

flex-basis: 200px;

登录后复制

，那么在Flexbox的计算中，它会首先被视为200px宽。只有当

flex-basis

登录后复制

被设置为

auto

登录后复制

时，Flexbox才会去查看

width

登录后复制

或

height

登录后复制

属性，如果它们存在，就用它们作为

flex-basis

登录后复制

的初始值；如果

width

登录后复制

height

登录后复制

也不存在，那就按内容大小来。

我个人在写Flexbox布局时，除非有特殊需求（比如在交叉轴方向上需要固定尺寸），我更倾向于直接使用

flex-basis

登录后复制

来控制flex item在主轴上的初始尺寸，这样能让布局逻辑更清晰，避免不必要的冲突和优先级问题。

.flex-container {
  display: flex;
  flex-direction: row;
  width: 500px;
  border: 1px solid #ccc;
}

.item-a {
  width: 300px; /* 传统宽度 */
  flex-basis: 150px; /* flex-basis会覆盖width */
  background-color: lightblue;
  padding: 10px;
}

.item-b {
  width: 100px;
  flex-basis: auto; /* 此时会参照width: 100px */
  background-color: lightcoral;
  padding: 10px;
}

登录后复制

在这个例子中，

item-a

登录后复制

的宽度会是150px（在伸缩前），而不是300px。而

item-b

登录后复制

的初始宽度是100px，因为它

flex-basis: auto

登录后复制

。这种优先级关系，在实际开发中非常关键。

自由画布

百度文库和百度网盘联合开发的AI创作工具类智能体

查看详情

如何使用flex-grow实现等宽布局或按比例分配空间？

使用

flex-grow

登录后复制

来实现等宽布局或按比例分配空间，是我最常用的Flexbox技巧之一。它让响应式设计变得异常简单。

1. 实现等宽布局： 当你想让容器内的所有flex item平分剩余空间，从而实现等宽布局时，最简洁的方法是给所有flex item设置

flex: 1;

登录后复制

。这个

flex: 1;

登录后复制

其实是

flex: 1 1 0%;

登录后复制

的简写。这意味着：

```
flex-grow: 1;
```
登录后复制
：所有元素都会以相同的比例去瓜分容器中所有可用的额外空间。
```
flex-shrink: 1;
```
登录后复制
：它们也都可以收缩。
```
flex-basis: 0%;
```
登录后复制
：这是关键。它告诉浏览器，在计算伸缩之前，这些元素的初始尺寸是0。这样一来，所有的可用空间都变成了“额外空间”，然后被
```
flex-grow
```
登录后复制
公平地分配。

.equal-width-container {
  display: flex;
  width: 100%; /* 假设占满父容器 */
  border: 1px solid #ccc;
}

.equal-item {
  flex: 1; /* 简写，等同于 flex: 1 1 0%; */
  padding: 20px;
  text-align: center;
  border-right: 1px solid #eee;
}

.equal-item:last-child {
  border-right: none;
}
/* 结果：所有.equal-item都会平分容器的宽度 */

登录后复制

2. 实现按比例分配空间： 如果你需要更精细的控制，让不同flex item占据不同比例的额外空间，只需调整它们的

flex-grow

登录后复制

值即可。同样，为了确保是按比例分配所有额外空间，通常也会将

flex-basis

登录后复制

设置为

登录后复制

。

.proportional-container {
  display: flex;
  width: 100%;
  border: 1px solid #ccc;
}

.item-one-third {
  flex: 1 1 0%; /* 占据1份 */
  background-color: #a7d9f7;
  padding: 20px;
}

.item-two-thirds {
  flex: 2 1 0%; /* 占据2份 */
  background-color: #f7d9a7;
  padding: 20px;
}
/* 结果：item-two-thirds会是item-one-third宽度的两倍 */

登录后复制

这里有个小细节，如果

flex-basis

登录后复制

不是

登录后复制

，而是

auto

登录后复制

或者一个固定值，那么

flex-grow

登录后复制

分配的是减去所有flex item的
flex-basis
登录后复制
之和后的剩余空间。这意味着，如果你的

flex-basis

登录后复制

值比较大，最终的比例可能不会严格按照

flex-grow

登录后复制

的比例来。比如，两个元素，一个

flex: 1 1 100px;

登录后复制

，另一个

flex: 2 1 100px;

登录后复制

，它们都会先占用100px，然后剩余空间按1:2分配。这样总宽度比例就不是严格的1:2了。所以，当追求严格的比例分配时，

flex-basis: 0

登录后复制

是个好习惯。

什么时候应该使用flex-shrink，以及如何避免不必要的收缩？

flex-shrink

登录后复制

这个属性，在我看来，是Flexbox处理“空间不足”场景的利器。它决定了当flex items的总尺寸超出flex容器时，每个item应该如何“委屈”自己，缩小以适应容器。

什么时候使用

flex-shrink

登录后复制

？

当你希望flex item在容器空间不足时能够自动调整大小，避免溢出时，

flex-shrink

登录后复制

就派上用场了。默认情况下，

flex-shrink

登录后复制

的值是

登录后复制

，这意味着所有的flex item都会按照一定的比例收缩。

比如，你有一个导航栏，里面有几个菜单项。当屏幕宽度缩小，菜单项可能就会挤不下。这时，默认的

flex-shrink: 1

登录后复制

会让它们都等比例缩小，尽量保持在同一行。

更具体的场景：

响应式布局中元素的自适应： 很多时候，我们希望内容区域能根据视口大小自动调整，
```
flex-shrink
```
登录后复制
就让这种“弹性”成为可能。
避免内容溢出： 当你不想出现横向滚动条，或者元素被截断时，让元素适度收缩是必要的。

如何避免不必要的收缩？

虽然

flex-shrink

登录后复制

很实用，但有些时候我们不希望某些元素收缩。比如一个logo、一个固定宽度的侧边栏、或者一个重要的按钮，它们必须保持其最小尺寸。这时候，

flex-shrink: 0;

登录后复制

就成了我们的救星。

flex-shrink: 0;
登录后复制
：阻止元素收缩。当一个flex item被设置
```
flex-shrink: 0;
```
登录后复制
时，它将不会在容器空间不足时缩小。它会保持其
```
flex-basis
```
登录后复制
（或
```
width
```
登录后复制
/
```
height
```
登录后复制
，如果
```
flex-basis
```
登录后复制
是
```
auto
```
登录后复制
）定义的尺寸。这对于需要保持固定大小的元素至关重要。

.layout-container {
  display: flex;
  width: 100%;
  min-width: 300px; /* 模拟小屏幕 */
  border: 1px solid #ccc;
}

.sidebar {
  flex: 0 0 200px; /* 不伸不缩，固定200px宽 */
  background-color: #e0f7fa;
  padding: 15px;
}

.main-content {
  flex: 1 1 auto; /* 可伸可缩，优先内容尺寸，但会占用剩余空间 */
  background-color: #f1f8e9;
  padding: 15px;
}
/* 结果：当容器宽度小于200px + main-content的最小内容宽度时，main-content会收缩，但sidebar会保持200px */

登录后复制

在这个例子中，即使

.layout-container

登录后复制

的宽度变得很小，

.sidebar

登录后复制

也会坚定地保持200px的宽度，而

.main-content

登录后复制

则会努力收缩来适应剩余空间。如果

.main-content

登录后复制

收缩到其内容的最小尺寸也无法适应，那么整个容器就可能出现溢出。

结合

min-width

登录后复制

/
min-height
登录后复制
进行更精细的控制：

有时候，你可能不希望元素完全不收缩，而是希望它只收缩到某个最小尺寸。这时，

min-width

登录后复制

（或

min-height

登录后复制

，取决于

flex-direction

登录后复制

）就与

flex-shrink

登录后复制

形成了强大的组合。即使

flex-shrink

登录后复制

允许元素收缩，

min-width

登录后复制

也会为它设定一个“底线”，确保它不会缩小到无法接受的程度。

.gallery-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  width: 100%;
  border: 1px solid #ccc;
}

.gallery-item {
  flex: 1 1 250px; /* 初始250px宽，可伸可缩 */
  min-width: 180px; /* 最小收缩到180px */
  background-color: #ffe0b2;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
}
/* 结果：.gallery-item会尝试保持250px，如果空间不足会收缩，但不会小于180px。如果空间足够，它们会伸展以填充行。 */

登录后复制

这里，