为什么弹性物品会包裹而不是收缩？

我想知道是否有人可以给我一个关于如何计算 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；包裹将在收缩之前首先生效（我将第二个黄色块设置为flex: 1 1 400px;）变成3行，然后收缩生效，直到容器达到200px；

我想知道弹性盒布局决定的顺序/规则是什么？为什么它不直接从 400 块缩小呢？

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

Thanks

See Flex布局算法 https://www.w3.org/TR/css-flexbox-1/#layout-algorithm在规范中：

1. 初始设置 https://www.w3.org/TR/css-flexbox-1/#box-manip
2. 线长测定 https://www.w3.org/TR/css-flexbox-1/#layout-algorithm
3. 主要尺寸确定 https://www.w3.org/TR/css-flexbox-1/#main-sizing
4. 十字尺寸测定 https://www.w3.org/TR/css-flexbox-1/#cross-sizing
5. 主轴对准 https://www.w3.org/TR/css-flexbox-1/#main-alignment
6. 交叉轴对齐 https://www.w3.org/TR/css-flexbox-1/#cross-alignment
7. 解决灵活长度问题 https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths
8. 确定尺寸和不定尺寸 https://www.w3.org/TR/css-flexbox-1/#definite-sizes
9. 内在尺寸 https://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes

首先，在步骤 3 中，弹性项目被收集到弹性行中。

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

So yes, flex-wrap，它决定如何将弹性项目收集到弹性行中，比flex-shrink.