flex-box:包裹前缩小

Question

我有一个包含多个列的布局,其中一些是固定的,另一些是根据需要拉伸的.因此,我使用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.一旦我将ap放入拉伸柱,包裹和收缩的行为就会有所不同.

当空间变小时我的预期行为:首先缩小,然后换行.收缩.stretch.达到最小宽度后,包裹元素.

一旦我将p放入.stretch,我得到的行为:首先换行,然后收缩.该行首先被包裹.收缩只发生在一切都被包裹之后.

我希望先收缩,然后换行.简而言之,我希望JSFiddle中的第二行表现得像第一行一样.我需要做什么？

Answer 1

设置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的例子

Answer 2

使用柔性流动时,仅在达到柔性基础尺寸后才会发生收缩.因此,如上所述,设置flex-basis:100px意味着一旦没有足够的空间容纳所有项目,包括该列的100px基础,您就希望该行开始包装.一旦房间用完,物品将包裹到新的一条线上.当空间再次耗尽时,将形成一条新线.这一直持续到每个项目都有自己的行.只有这样 - 如果仍然没有基础的空间 - 项目是否会开始缩小.

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

希望有所帮助!