我尝试使用 Flexbox 制作 2 列列表和垂直顺序
<ul>
<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>
查看示例图片
这是 Flexbox 中的简单换行列布局。
Each li元素占据6em高度 （5em高度+.5emmargin * 2)，所以我们将父容器设置为30em高度适合五个元素。
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
height: 30em;
}
li {
background: gray;
width: 5em;
height: 5em;
margin: .5em;
}<ul>
<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>