如果李列表比UL比STRECH UL寬度

Question

更高，我需要創建將在其中顯示的圖像的李列表，如果李名單高度不超過UL列表中較高，應該會在一列中。

IF的李列表的高度比UL名單比它應該把他們兩個科朗大。 這裏是使用Fidle小提琴IM，但浮動：左，它automatticly對齊在左邊第二個李（而不是它應該在第一李下，如果在UL沒有更多的空間，比它應該跳上新行）。

這裏是一個更好的解釋的圖像：|

Answer 1

flexbox可以做到這一點是必需的一些限制，例如該ul的高度被固定，以便迫使所述包裹。

還有在Chrome關於Flexbox的柱包裹bug，但是，對於它的價值。

* { 
 
    box-sizing: border-box; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 200px; 
 
    margin-left: 10%; 
 
} 
 
.box { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #c0ffee; 
 
    border: 1px solid blue; 
 
    border-radius: 50%; 
 
    margin: 5px; 
 
}

<ul> 
 
    <li> 
 
    <div class="box"></div> 
 
    </li> 
 
    <li> 
 
    <div class="box"></div> 
 
    </li> 
 
</ul> 
 

 
<ul> 
 
    <li> 
 
    <div class="box"></div> 
 
    </li> 
 
    <li> 
 
    <div class="box"></div> 
 
    </li> 
 
    <li> 
 
    <div class="box"></div> 
 
    </li> 
 
    <li> 
 
    <div class="box"></div> 
 
    </li> 
 
    <li> 
 
    <div class="box"></div> 
 
    </li> 
 
    <li> 
 
    <div class="box"></div> 
 
    </li> 
 
</ul>