如何使用Flexbox制作垂直列表2列 [英] How to make vertical list 2 column using flexbox

问题描述

我尝试使用flexbox进行2列列表和垂直顺序

I try to make 2 column list and vertical order using flexbox

<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中的简单包装列布局.

Here's a simple wrapping column layout in flexbox.

每个 li 元素占用 6em 高度( 5em 高度+ .5em 边距* 2)，因此我们将父容器的高度设置为 30em ，以容纳五个元素.

Each li element takes up 6em height (5em height + .5em margin * 2), so we set the parent container to 30em height to fit five elements.

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>

这篇关于如何使用Flexbox制作垂直列表2列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！