flex:1详解，以及flex:1和flex:auto的区别

什么是flex：1？

在css中，我们经常可以看到这样的写法：

.box {
  display: flex;
}

.item {
  flex: 1;
}

1
2
3
4
5
6
7
8

这里的flex:1相当于flex: 1 1 0%，它是一个简写属性，表示项目（flex item）在弹性容器（flex container）中如何伸缩。它相当于flex: 1 1 0%，包含了三个子属性：

• flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，默认值为 auto ，即项目本身的大小。

flex:1的作用

使用flex:1的作用是让项目能够自动填充剩余空间，实现自适应布局。例如，我们有一个水平排列的三个项目，它们的内容长度不一样，我们想让它们平均占据一行的空间，就可以给它们都设置flex:1\

<div class="container">
  <div class="item">Hello</div>
  <div class="item">World</div>
  <div class="item">Flex</div>
</div>
.container {
  display: flex;
}

.item {
  flex: 1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

这样，无论容器的宽度如何变化，项目都会自动调整宽度，保持平均分配。

flex:1和其他值的区别

flex属性还可以取其他值，例如：

• flex: none，相当于flex: 0 0 auto，表示项目不会伸缩，保持原始大小。
• flex: auto，相当于flex: 1 1 auto，表示项目会根据自身大小和剩余空间进行伸缩。
• flex: n（n为正整数），相当于flex: n 1 0%，表示项目的放大比例为n，其他值默认。

我们可以通过修改上面的例子来观察不同值的效果：

<div class="container">
  <div class="item none">Hello</div>
  <div class="item auto">World</div>
  <div class="item one">Flex</div>
</div>
.container {
  display: flex;
}

.item {
  border: 1px solid black;
}

.none {
  flex: none;
}

.auto {
  flex: auto;
}

.one {
  flex: 1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

可以看到，none类的项目保持了原始大小，auto类的项目根据内容长度进行了伸缩，one类的项目平分了剩余空间。

felx：1和flex：auto的区别

• flex-basis属性定义了项目在分配多余空间之前，占据的主轴空间（main size）。
• flex:1相当于flex: 1 1 0%，表示项目的基准大小为0%，不考虑项目本身的大小，只根据剩余空间进行伸缩。
• flex:auto相当于flex: 1 1 auto，表示项目的基准大小为auto，即项目本身的大小，同时也会根据剩余空间进行伸缩。

这样，当容器的大小变化时，两者的表现也不同。

• 如果容器有足够的空间，flex:1和flex:auto都会平分剩余空间，但是flex:auto会保持项目本身的最小宽度，而flex:1不会。
• 如果容器没有足够的空间，flex:1会优先压缩内容，使得所有项目都能等分空间，而flex:auto会优先保持内容的完整性，挤压其他项目的空间。

总结

flex:1是一个常用的CSS属性，它可以让项目在弹性容器中自动填充剩余空间。
它是一个简写属性，包含了三个子属性：flex-grow, flex-shrink, flex-basis。
它相当于flex: 1 1 0%，flex：1和flex：auto都会占满剩余空间，我们可以根据合适的需求去选择这两种属性。