複数の行にわたるリスト項目の行を中断します。

Question

インラインの順序なしリストを作成していますが、項目は水平にまっすぐに繰り返しています。

3つのアイテムをインラインで作成し、次の3つのアイテムを作成します。

私の作成に伴う問題は、1行で水平に繰り返していることです。

.product { 
 
    width: 200px; 
 
    height: 300px; 
 
    background-color: green; 
 
} 
 
.product_area { 
 
    display: inline; 
 
} 
 
.product_ul { 
 
    display: flex; 
 
    list-style-type: none; 
 
}

<div class="product_area"> 
 
    <ul class="product_ul"> 
 
     <li><div class="product"></div></li> 
 
     <li><div class="product"></div></li> 
 
     <li><div class="product"></div></li> 
 
     <li><div class="product"></div></li> 
 
     <li><div class="product"></div></li> 
 
     <li><div class="product"></div></li> 
 
     <li><div class="product"></div></li> 
 
     <li><div class="product"></div></li> 
 
    </ul> 
 
</div>

これは私のバイオリンです：フレックスコンテナのhttps://jsfiddle.net/29qvekLz/2/

Answer 1

初期設定はflex-wrap: nowrapです。これは、フレックスアイテムが強制的に1行にとどまることを意味します。それがあなたが持っている主な問題です。

デフォルトをflex-wrap: wrapで上書きできます。

.product_ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    list-style-type: none; 
 
    padding-left: 0; 
 
} 
 

 
li { 
 
    flex: 0 0 30%; /* flex-grow, flex-shrink, flex-basis */ 
 
    height: 100px; 
 
    background-color: green; 
 
    margin: 5px; 
 
}

<div class="product_area"> 
 
    <ul class="product_ul"> 
 
    <li><div class="product"></div></li> 
 
    <li><div class="product"></div></li> 
 
    <li><div class="product"></div></li> 
 
    <li><div class="product"></div></li> 
 
    <li><div class="product"></div></li> 
 
    <li><div class="product"></div></li> 
 
    <li><div class="product"></div></li> 
 
    <li><div class="product"></div></li> 
 
    </ul> 
 
</div>