如何使用flexbox制作垂直列表2列

Question

我尝试使用 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>

查看示例图片

Answer 1

这是 Flexbox 中的简单换行列布局。

每个li元素占用6em高度（5em高度 +.5em边距 * 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>