首页 文章

flex-box：包裹前缩小

提问于
浏览 次
13

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

当空间变小时我的预期行为： First shrink, then wrap . 收缩.stretch . 达到最小宽度后，包裹元素 .

我将p放入.stretch后得到的行为： First wrap, then shrink . 该行首先被包裹 . 收缩只发生在一切都被包裹之后 .

我想拥有 First shrink, then wrap . 简而言之，我希望JSFiddle中的第二行表现得像第一行一样 . 我需要做什么？

css css3 flexbox

3 回答

  • 8

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

    回复于
  • 13

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

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

    希望有所帮助！

    回复于
  • 0

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

相关问题