html - 为什么 flex 元素包裹而不是收缩？

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>

我觉得有趣的是，如果我让容器的宽度小于 600px； wrap先生效再收缩(我把第二个黄色 block 设置为flex: 1 1 400px;)变成3行，然后收缩生效，直到container达到200px;

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

甚至我也将所有三个 block 都设置为 flex: 1 1 它们的基本大小； 换行仍然先发生。

谢谢

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 步， flex 元素被收集到 flex 行中。

稍后，在第 7 步，它们会 flex (增大、收缩或保持不变)。

是的，flex-wrap 决定了如何将 flex 元素收集到 flex 行中，它比 flex-shrink 具有更高的“优先级”。