柔性箱：收缩前收缩

我有一个多列的布局，其中一些是固定的，另一些是根据需要拉伸的。因此，我使用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中的第二行的行为与第一行相同。我需要做什么？

来源

2014-09-30 Joshua Gleitze

设置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; 
}

edited JSfiddle example

来源

2014-09-30 20:38:19

当使用柔性流动，只有不断缩小发生后达到柔性基础尺寸。因此，如上所述设置flex-basis：100px意味着您希望线条在所有项目没有足够空间时开始包装，包括该列的100px基础。一旦房间用完，物品将包裹到一条新线上。当空间再次耗尽时，将形成一条新线。这继续下去，直到每个项目都有自己的路线。只有这样 - 如果有仍然没有空间的基础 - 项目将开始萎缩。

您看到与内容段落有所不同的原因是因为您没有明确设置弹性基础。如果flex-basis设置为auto，则它将回退到该项目的宽度。如果未设置宽度，则在渲染内容后，基准会回落到项目大小，然后通过最小和最大宽度进行校正。所以在这种情况下是300px，因为您设置了最大宽度。请注意，如果您取消最大宽度，该项目会获得完整的100％宽度，并立即流入自己的行。然后，当您调整该项目开始缩小的页面的大小时，因为它已经有了自己的行，并且没有足够的空间存储该初始大小。

希望有帮助！

来源

2017-01-18 23:53:57 geddski

柔性箱：收缩前收缩

回答

相关问题