css flex:1；详解，配合demo效果解答

flex: 1; 是CSS的一个简写属性，它等同于设置 flex-grow, flex-shrink, flex-basis 这三个属性。

• flex-grow 属性定义了flex项目的放大比例，默认为0，即即使容器有多余的空间，也不会放大。
• flex-shrink 属性定义了flex项目的缩小比例，默认为1，即如果空间不足，flex项目会缩小。
• flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

当你设置 flex: 1; 时，所有这三个属性的值都被设置为1，表示该flex项目会占据等量的空间，并且在空间不足时会等比缩小。

示例代码：

HTML:

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.container {
  display: flex;
}
 
.item1 {
  flex: 1;
  background-color: lightblue;
}
 
.item2 {
  flex: 2;
  background-color: lightgreen;
}
 
.item3 {
  flex: 1;
  background-color: lightcoral;
}

在这个例子中，.item1 和 .item3 将会占据相同的空间，因为他们的 flex-grow 值都是1，而 .item2 将占据的空间是其他两项的两倍，因为它的 flex-grow 值是2。在空间不足时，所有项目会按照 flex-shrink 值等比缩小自身空间。