为什么弹性项目会包裹而不是收缩？

Question

我想知道是否有人可以简单介绍一下如何计算 flexbox 布局，尤其是优先级顺序，例如：

    <div id="container" style="display: flex; flex-direction: row; flex-wrap:wrap;">
    <div style="flex: 1 0 200px; height:200px; background-color: lightgreen;"></div>
    <div style="flex: 1 1 400px; height:200px; background-color: lightyellow;"></div>
    <div style="flex: 1 0 200px; height:200px; background-color: lightblue;"></div>
</div>

如果我让容器宽度小于 600 像素，我觉得很有趣； wrap 会在收缩前生效（我将第二个黄色块设置为flex: 1 1 400px;），它变成 3 行，然后收缩生效，直到容器达到 200px;

我想知道决定 flexbox 布局的顺序/规则是什么？为什么它不只是从 400 块缩小？

即使我也将所有三个块都设置为flex: 1 1 their basis size;，换行仍然首先发生。

谢谢

Answer 1

请参阅规范中的Flex Layout Algorithm：

1. Initial Setup
2. Line Length Determination
3. Main Size Determination
4. Cross Size Determination
5. Main-Axis Alignment
6. Cross-Axis Alignment
7. Resolving Flexible Lengths
8. Definite and Indefinite Sizes
9. Intrinsic Sizes

首先，在第 3 步，将弹性项目收集到弹性线中。

稍后，在第 7 步，它们会弯曲（增长、收缩或保持不变）。

所以是的，flex-wrap，它决定如何将弹性项目收集到弹性行中，比 flex-shrink 具有更多的“优先级”。

Answer 2

flex-shrink 属性通常在单行 flex 容器 (flex-wrap: nowrap) 中派上用场。

换句话说，当 flex 项目不能换行时，flex-shrink 将使它们在容器太小时收缩（规范称之为 负可用空间）。这具有防止弹性项目溢出容器的效果。

但是，在多行弹性容器 (flex-wrap: wrap) 中，大多数时候不会创建负的可用空间，因为弹性项目可以创建额外的行。一个例外是当多行容器中的多行容器（比方说行方向）窄到足以包装所有项目时。这会将项目堆叠在一个列中。现在它们将收缩或保持坚挺，具体取决于flex-shrink (demo)。

您有一个行方向的、启用了 wrap 的 flex 容器，其中包含三个 flex 项。

• div #1 ~ flex: 1 0 200px
• div #2 ~ flex: 1 1 400px
• div #3 ~ flex: 1 0 200px

当容器大于 800px 时，所有项目都保持在线。

当容器低于 800px 时，div #3 将换行（即使可以缩小，也无需缩小）。

在 600px 标记处（div #1 和 #2 的组合宽度），div #2 换行。同样，无需缩小。

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div:nth-child(1) {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightgreen;
}
div:nth-child(2) {
  flex: 1 1 400px;
  height: 200px;
  background-color: lightyellow;
}
div:nth-child(3) {
  flex: 1 0 200px;
  height: 200px;
  background-color: lightblue;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

来自规范：

flex-shrink

[此属性] 指定 flex 收缩因子，它决定如何 弹性项目将相对于其余弹性项目缩小 分配负可用空间时在弹性容器中。