フレックスボックスでインラインネストされたリストを折り返す

Question

フレックスボックスとラッピングを使用して次のような動作を作成できるかどうか疑問に思っています。

html { 
 
    font-size: 10px; 
 
} 
 
body { 
 
    padding: 30px; 
 
    font-size: 2rem; 
 
} 
 
.list { 
 
    display: inline; 
 
} 
 
.item { 
 
    padding: 10px; 
 
    display: inline-block; 
 
    background-color: light-gray; 
 
    border: 1px solid gray; 
 
}

<div style="width: 250px;"> 
 
    <div class="list"> 
 
    <div class="list"> 
 
     <div class="item">asfasfasf</div> 
 
     <div class="item">afasf</div> 
 
     <div class="item">asfff asfasasfasf</div> 
 
     <div class="item">afasf</div> 
 
     <div class="item">afasf</div> 
 
     <div class="item">afasf</div> 
 
    </div> 
 
    <div class="item">trailing</div> 
 
    </div> 
 
</div>

http://codepen.io/anon/pen/JXqgag?editors=1100

上記の二つinline外側のアイテムが内側アイテムの隣に位置合わせ項目、他にネスト一つとコンテナ、「交差点」の境界を有しています内側のコンテナ。

フレックスボックスアラインメントオプションの他の細かい点については、同じ設定でフレックスボックスを使用したいと思います。ネストされたリストが難しい要件であると仮定して、フレックスを使用するか、「後続」アイテムと同じ動作を実現するためにinline-flexを使用します。私の試みは、常にそれ自身の行に末尾の項目のブレークを残しました、それはinline-flexはinline-blockにもっと類似しているようです。

Answer 1

コンテナがdisplay: inlineであるため、レイアウトが機能します。これにより、ラッピングした後でも要素を並べて整列させることができます。ボックスは、次の行に「後」の要素を強制的に、ネストされた.list要素をラップと同じように、容器は、display: inline-blockた場合

あなたのレイアウトはない働くだろう。

display: inline-flexは、display: inline-blockに似ています。 「末尾の」要素は、兄弟のブロックボックスに侵入せず、親のdisplayの値に応じて、兄弟の隣接または兄弟の下にある可能性のある独自のボックスに存在します。

フレックスアライメントは、それぞれ.itemの内容に使用できます。

html { font-size: 10px; } 
 

 
body { 
 
    padding: 30px; 
 
    font-size: 2rem; 
 
} 
 

 
.list { 
 
    display: inline; 
 
} 
 

 
.item { 
 
    display: inline-flex;   /* adjusted */ 
 
    padding: 10px; 
 
    background-color: lightgray; /* corrected; light-gray not a valid color */ 
 
    border: 1px solid gray; 
 
}

<div style="width: 250px;"> 
 
    <div class="list"> 
 
    <div class="list"> 
 
     <div class="item">asfasfasf</div> 
 
     <div class="item">afasf</div> 
 
     <div class="item">asfff asfasasfasf</div> 
 
     <div class="item">afasf</div> 
 
     <div class="item">afasf</div> 
 
     <div class="item">afasf</div> 
 
    </div> 
 
    <div class="item">trailing</div> 
 
    </div> 
 
</div>

Revised Codepen