为什么弹性项目包装而不是收缩? [英] Why do flex items wrap instead of shrink?
问题描述
我想知道是否有人可以简单介绍一下Flexbox布局的计算方式，尤其是按优先级顺序进行计算，例如:
I wonder if anyone could give me a simple intro about how flexbox layout gets calculated, especially in which priority order, for example:
<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像素；换行首先在缩小(我将第二个黄色块设置为flex: 1 1 400px;)之前生效，然后将其分成3行，然后缩小生效，直到容器达到200px；
I find it interesting that if I make the container width smaller than 600px; the wrap will take effect first before the shrinking (I set the second yellow block to flex: 1 1 400px;) which turn into 3 rows, then the shrinking take effect until container reach 200px;
我想知道决定flexbox布局的顺序/规则是什么?为什么它不仅仅从400块缩小?
I wonder what is the order/rule the flexbox layout get decided? Why it does not just shrink from 400 block?
甚至我也将所有三个块都设置为flex: 1 1 their basis size;，换行仍然会首先发生.
And even I also set all three blocks to flex: 1 1 their basis size; the wrap still happens first.
谢谢
推荐答案
flex-shrink属性通常在单行flex容器(flex-wrap: nowrap)中很方便.
The flex-shrink property often comes in handy in a single-line flex container (flex-wrap: nowrap).
换句话说，当弹性项目无法包装时，flex-shrink将使它们在容器太小时收缩(规范称此为负自由空间).这具有防止弹性项目溢出容器的作用.
In other words, when the flex items cannot wrap, flex-shrink will enable them to shrink when the container is too small (the spec calls this negative free space). This has the effect of preventing flex items from overflowing the container.
但是，在多行flex容器(flex-wrap: wrap)中，大多数情况下不会创建负的可用空间，因为flex项目可以创建额外的行.一个例外是，当行方向的多行容器狭窄到足以包装所有项目时.这样就将项目堆叠在单个列中.现在，它们将收缩或保持牢固，具体取决于flex-shrink(演示).
However, in a multi-line flex container (flex-wrap: wrap) no negative free space is created most of the time because flex items can create additional lines. An exception is when a multi-line container in, let's say, row-direction, is narrow enough to wrap all items. This leaves items stacked in a single column. Now they will shrink or hold firm, depending on flex-shrink (demo).
您有一个行方向，启用了包装的flex容器，其中包含三个flex项目.
You have a row-direction, wrap-enabled flex container with three flex items.
- div#1〜
flex: 1 0 200px - div#2〜
flex: 1 1 400px - div#3〜
flex: 1 0 200px
- div #1 ~
flex: 1 0 200px - div #2 ~
flex: 1 1 400px - div #3 ~
flex: 1 0 200px
当容器大于800px时，所有项目都保留在行上.
When the container is greater than 800px, all items stay on the line.
当容器破裂到800px以下时，第3格将环绕(即使有可能也无需收缩).
When the container breaks below 800px, div #3 will wrap (there is no need to shrink, even if it could).
在600像素标记处(div#1和#2的组合宽度)，div#2换行.同样，无需收缩.
At the 600px mark (the combined width of divs #1 & #2), div #2 wraps. Again, no need to shrink.
#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容器中.
[This property] specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.
这篇关于为什么弹性项目包装而不是收缩?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
