如果李列表比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>