将项目包裹在不等高度的列中

Question

项目需要根据最大列高度排列在列中，如此

item 1 | item 6
item 2 | 
item 3 |
item 4 |
item 5 |

我尝试使用此列css

ul {
    height: 150px;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

但它会将项目排列在相同高度的列中，如此

item 1 | item 4
item 2 | item 5
item 3 | item 6

Answer 1

作为CSS3列的替代方法，您还可以使用CSS3 flexboxes。

将父元素的display设置为flex，将flex-direction设置为column，然后通过添加flex-wrap: wrap强制它换行。

flexbox容器元素将尊重高度，这似乎是您正在尝试实现的目标。

＆＃13;

＆＃13;

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 140px;
}

＆＃13;

<ul class="container">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
</ul>

＆＃13;

＆＃13;

＆＃13;