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。一旦我在拉伸柱中放入一个p，包裹和收缩的行为就会有所不同。

当空间变小时，我的预期行为：首先缩小，然后换行。收缩.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;
}

<强> edited JSfiddle example

Answer 2

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

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

希望有所帮助！

Answer 3

我会把这个放进去，根据这里的答案对我有用。它会增长，缩小，包裹。（为清楚起见，语法很冗长。）请注意，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>

flex-box：包裹前缩小

3 个答案: