详解flex布局的元素如何分配容器的剩余空间

当一个 flex 容器内部的元素根据其设置的 flex 缩写属性不占满整个容器时，flex 布局会进行剩余空间分配，按比例将空间分配给这些元素。这个比例可以是以数字表示的固定比例，也可以是一个自适应值，即 remaining space (剩余空间)。

以下是flex元素如何分配容器的剩余空间的详细攻略:

1. 分配剩余空间的默认方式

当一个 flex 容器中的元素没有设置 flex 属性时，它默认会使用以下的 flex 属性值:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

其中：

• flex-grow: 0 表示此元素不增加剩余空间。如果其他元素使用了 flex-grow 属性且剩余空间存在，则其他元素先分配剩余空间。
• flex-shrink: 1 表示此元素缩小容器可用空间的比例。默认情况下，子元素是可以缩小的，缩小的比例是 1:1。

因此，如果一个 flex 容器中没有元素设置 flex 属性，则它们将按照 1:1 的比例缩小。

2. 分配剩余空间的自定义方式

为了实现自定义的分配方式，可以设置 flex 属性来控制 flex 元素占据剩余空间的程度。以下是 flex 属性的详细解释：

a. flex-grow

flex-grow 属性是用来设置弹性盒子的扩展比例（share），即当有多余空间时，元素是否按比例分配空间。默认值为 0，没有可扩展空间。

比如有下面的样式代码：

.container {
  display: flex;
  justify-content: space-between;
}
.item {
  flex-grow: 1;
}

上述代码中，.container 容器采用 space-between 布局方式，表示元素与容器两端距离相等，中间的元素彼此间隔相等。然后flex-grow: 1 表示item元素占据剩余空间的比例为 1。

flex-grow 分配的剩余空间是按权重来分配的。比如以下样式代码：

.item1 {
  flex-grow: 1;
}
.item2 {
  flex-grow: 2;
}
.item3 {
  flex-grow: 1;
}

上述代码中，.item1 和 .item3 的比重都是 1，.item2 的比重是 2。当剩余空间为 100px 时，.item2 元素会分配其中的 50px，而 .item1 和 .item3 元素则分别分配其中的 25px。总的来说，分配的比例就是 Item 1:2:1。

b. flex-shrink

有些时候，弹性盒子里面的元素比弹性盒子的实际宽度还要宽，为了避免这种情况下的溢出，我们可以使用 flex-shrink 属性来控制子元素缩小的比率。

flex-shrink: 0 表示此元素不缩小。如果数值大于 0，则表示此元素在容器空间不足时缩小的比例，默认值为 1。

比如以下的样式代码：

.container {
  width: 300px;
  height: 200px;
  display: flex;
  border: 2px solid black;
  flex-wrap: wrap;
}
.item {
  flex-shrink: 1;
  border: 1px solid red;
}

上述代码中，.container 容器宽度为 300px，高度为 200px。它的 flex-wrap 属性为 wrap 才能演示 flex-shrink 的作用。.item 元素设置了flex-shrink: 1，在容器空间不足时缩小的比例为 1:1。如果设置为 flex-shrink: 0，则元素将不缩小。

3. 示例

案例一

比如说，我们有三个子元素：A、B 和 C。A 和 B 设置了 flex: 1，而 C 没有设置 flex 属性。

这意味着 A 和 B 将占据两个比例单位，而 C 不能增大，不能缩小，因为它的默认值为 flex: 0 1 auto。

此时，如果容器的可用宽度为 500px，那么 A 和 B 每个元素将占据 (500px / 2) = 250px 的宽度，而 C 则使用其原始的宽度来显示内容。

<div class="container">
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
</div>

<style>
  .container {
    display: flex;
  }
  .item-a,
  .item-b {
    flex: 1;
  }
</style>

案例二

再比如说，我们有三个子元素：A、B 和 C。A 和 B 设置了 flex: 1 2 25%，而 C 没有设置 flex 属性。此时，如果容器的可用宽度为 500px，那么由于 A 和 B 具有扩展系数，它们将各占据 (2 / 5) ✖️ (500px) = 200px 的宽度，而 C 则使用其原始的宽度来显示内容。

<div class="container">
  <div class="item item-a">A</div>
  <div class="item item-b">B</div>
  <div class="item item-c">C</div>
</div>

<style>
  .container {
    display: flex;
  }
  .item-a,
  .item-b {
    flex: 1 2 25%;
  }
</style>

以上是关于如何分配剩余空间的详解，希望对您有帮助。