flex简写属性介绍

用于设置：弹性元素如何 放大或缩小，以适应其弹性容器中可用的空间。
由以上3个属性组成。

1，flex-grow

用于指定弹性元素在可用空间增加时的放大比例。它决定了弹性元素在父容器中分配额外空间的比例。

flex-grow 默认值为 0，表示弹性元素不会放大。

注意，flex-grow属性的比例计算是相对于其他非零 flex-grow 值的弹性元素而言的。

当容器有可用空间时，具体计算方法如下：

1. 计算所有弹性元素中，非零flex-grow元素值的和 totalA。

2. 用容器的可用空间，减去已经占用的空间（即所有弹性元素的初始宽度之和）得到剩余空间。

3. 将剩余空间按照每个弹性元素的flex-grow值与 totalA 的比例进行分配。

分配的剩余空间是 width或 height，这取决于flex-direction。

以width举例：

<div class="container">
  <div class="item" style="background-color: red; flex-grow: 1">Item 1</div>
  <div class="item" style="background-color: yellow; flex-grow: 2">Item 2</div>
  <div class="item" style="background-color: green; flex-grow: 3">Item 3</div>
</div>

.container {
  display: flex;
  width: 600px;
}

.item {
  width: 100px;
  height: 100px;
}

1. 容器的可用空间为600px，每个弹性元素的初始宽度为100px。剩余空间为600px - (100px * 3) = 300px。
2. 非零flex-grow值的总和为1 + 2 + 3 = 6。
3. 3个元素分配空间分别为：
   • (1 / 6) * 300px = 50px
   • (2 / 6) * 300px = 100px
   • (3 / 6) * 300px = 150px
4. 因此，最终的宽度分配为
   • Item 1: 100px + 50px = 150px
   • Item 2: 100px + 100px = 200px
   • Item 3: 100px + 150px = 250px

2，flex-shrink

用于指定弹性元素在容器空间不足时的收缩比例。它决定了弹性元素在父容器中收缩的比例。

flex-shrink默认值为1，表示弹性元素可以收缩。

flex-shrink: 0 表示元素不会被收缩。实际使用场景中，一般不是 0 就是 1。

比例计算规则和使用场景较为复杂， 这里不做讨论。

3，flex-basis

用于指定弹性元素在主轴方向上的初始大小。

flex-basis默认值为 auto，表示弹性元素参照自身的 width 或 height。

注意，在 flex 布局中，如果设置弹性元素的 flex-basis: 非auto ，它的 优先级 > width 或 height

也就是说，宽度的总优先级（以 width 举例）： max-width > flex-basis > width。

---

4，实际使用

4.1，flex: 1

是 flex:1 1 0 的简写，相当于 flex-grow: 1，

1. 如果只给1个弹性元素设置，表示该弹性元素占满全部的剩余空间。
2. 如果给所有的弹性元素都设置，表示平分所有的剩余空间。

4.2，flex: 0 0 x%

表示禁止该元素放大或收缩，使用指定的固定大小。

直接设置 flex-shrink: 0 是一样的效果，因为 flex-basis 用默认值就行。

一般用于布局时，手动指定弹性元素的大小为固定值。比如实现UI组件中的 row 和 col，就是通过flex: 0 0 x% 给 col 指定的固定宽度。

以上。