为什么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,我觉得很有意思; 收缩将在缩小之前生效(我将第二个黄色块设置为flex: 1 1 400px;),转为3行,然后收缩效果直到容器达到200px;

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

甚至我还将所有三个块设置flex: 1 1 their basis size;为包裹仍然首先发生.

谢谢

Answer 1

请参阅规范中的Flex布局算法:

1. 初始设置
2. 线长确定
3. 主要尺寸确定
4. 交叉尺寸确定
5. 主轴对齐
6. 跨轴对齐
7. 解决弹性长度
8. 确定和不定的大小
9. 内在尺寸

首先,在步骤3,将柔性物品收集到柔性线中.

之后,在步骤7,他们弯曲(成长,收缩或保持不变).

因此,flex-wrap确定如何将柔性物品收集到柔性线中,具有更多"优先级" flex-shrink.

Answer 2

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

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

但是，在多行 Flex 容器 ( flex-wrap: wrap) 中，大多数情况下不会创建负可用空间，因为 Flex 项目可以创建额外的行。一个例外是当多行容器（比方说，行方向）足够窄以包裹所有项目时。这使得物品堆叠在单列中。现在它们会收缩或保持坚挺，具体取决于flex-shrink（演示）。

您有一个行方向、启用换行的 Flex 容器，其中包含三个 Flex 项目。

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

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

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

在 600 像素标记处（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 收缩因子，该因子决定当分配负的可用空间时，Flex 项目相对于 Flex 容器中的其余 Flex 项目收缩多少。