html - 如何使用 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>

见图片的例子

标签： htmlcss

Answer 1

这是 flexbox 中的一个简单的包装列布局。

每个li元素占用6em高度（5emheight + .5emmargin * 2），因此我们将父容器设置为30emheight 以容纳五个元素。

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>