包装：收缩前收缩
我有一个多列的布局，其中一些是固定的，另一些则根据需要拉伸。 因此，我使用flexbox。 另外，我想要并且需要使用flex-wrap。
结构是这样的：
<div class="row" style="display: flex; flex-flow: row wrap">
<div class="column fixed" style="flex: 0 0 auto"></div>
<div class="column stretch" style="flex: 1 1 auto"></div>
<div class="column fixed" style="flex: 0 0 auto"></div>
</div>
请参阅http://jsfiddle.net/mh3rypqj/1/
现在，只要我们在谈论空白的div，一切都会按预期工作。 一旦我将p放入拉伸柱中，包裹和收缩的行为就会有所不同。
我在空间越来越小时的预期行为： 首先缩小，然后换行 。 收缩。伸展。 一旦达到最小宽度，包装元素。
一旦我将p放入.stretch中，我就会得到这种行为： 首先换行，然后缩小 。 该行首先被包装。 收缩只发生在一切被包裹后。
我想先收缩，然后换行 。 总之，我希望JSFiddle中的第二行的行为与第一行相同。 我需要做什么？
设置flex-basis等于min-width ：
.column.stretch {
flex: 1 1 100px; /* or 1 0 100px, and no more need in min-width at all */
max-width: 300px;
min-width: 100px;
background: red;
}
编辑了JSfiddle示例
使用柔性流动时，只有在达到柔性基础尺寸后才会收缩。 因此，如上所述设置flex-basis：100px意味着您希望线条在所有项目没有足够空间时开始包装，包括该列的100px基础。 一旦房间用完，物品将包裹到一条新线上。 当空间再次耗尽时，将形成一条新线。 这继续下去，直到每个项目都有自己的路线。 只有这样 - 如果仍然没有空间作为基础 - 物品会开始收缩。
您看到与内容段落不同的原因是因为您没有明确设置基于弹性的内容。 如果flex-basis设置为auto，则它将回退到项目的宽度。 如果未设置宽度，则在渲染内容后，基准会回落到项目大小，然后通过最小和最大宽度进行校正。 所以在这种情况下是300px，因为您设置了最大宽度。 请注意，如果您取消最大宽度，该项目会获得完整的100％宽度，并立即流向自己的线条。 然后，当您调整该项目开始缩小的页面的大小时，因为它已经有了自己的行，并且没有足够的空间存储该初始大小。
希望有所帮助！
我会根据这里的答案为我工作。 它增长，它缩小，它包裹。 （为了清晰，语法是详细的。）请注意，flex-basis / min-width值和用户当前的浏览器缩放改变了发生的情况。 AFAICS。
<div id="outer"
style="
display: flex;
flex-wrap: wrap;
">
<div id="inner"
style="
flex-grow: 1; /* it can grow */
flex-shrink: 1; /* it can shrink */
flex-basis: 225px; /* arbitrary depending on design */
min-width: 225px; /* equal to flex-basis */
max-width: 20%; /* (100% - margins)/number of boxes */
padding: .5em; /* half of desired margin */
">
<...content...>
</div>
</div>
下一篇: CSS Flex Box