web-dev-qa-db-ja.com

フレックスボックス：ラップする前に縮小

複数の列を含むレイアウトがあり、そのうちのいくつかは固定されており、他は必要に応じて伸縮します。したがって、私はflexboxを使用します。さらに、フレックスラップを使用したいと思います。

構造は次のとおりです。

<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を縮小します。 min-widthに達したら、要素をラップします。

Pを.stretchに入れたら、次のように動作します：最初にラップしてから、shrink。行が最初に折り返されます。収縮は、すべてがラップされた後にのみ発生します。

最初に縮小し、次にラップします。つまり、JSFiddleの2番目の行が最初の行と同じように動作するようにします。私は何をしなければなりませんか？

cssflexbox
22
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;
}

編集されたJSfiddleの例

24
Ilya Streltsyn

フレックスフローを使用する場合、縮小は常に発生します[〜＃〜]後[〜＃〜]フレックス基準のサイズに達しました。したがって、上記のようにflex-basis：100pxを設定するということは、その列の100px基準を含むすべてのアイテムのための十分なスペースがない場合に、行が折り返しを開始することを意味します。部屋がなくなると、アイテムは新しい行に折り返されます。スペースが再びなくなると、新しい線が形成されます。これは、各アイテムが独自のラインを持つまで続きます。そうして初めて-まだのスペースがない場合-アイテムは縮小し始めます。

コンテンツの段落との違いが見られるのは、フレックスベースを明示的に設定していないためです。 flex-basisがautoに設定されている場合、アイテムの幅にフォールバックします。幅が設定されていない場合、コンテンツがレンダリングされると、基本はアイテムのサイズにフォールバックし、最小幅と最大幅によって修正されます。この場合、最大幅を設定しているため、300pxになります。 max-widthを外すと、そのアイテムは完全な100％の幅になり、すぐに独自のラインに流されます。次に、ページのサイズを変更すると、そのアイテムにはすでに独自の行があり、その初期サイズに十分なスペースがないため、アイテムが縮小し始めます。

お役に立てば幸いです。

13
geddski

ここでの答えでうまくいったことに基づいて、これを投入します。成長し、収縮し、包みます。 （構文はわかりやすくするために詳細です。）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>
1
blif