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

什么是flex：1？

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

.box {
   
  display: flex;
}

.item {
   
  flex: 1;
}

这里的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=