Html 按升序排列的Flexbox列

我正在处理列表中的一些项目：

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
  <li>Item6</li>
  <li>Item7</li>
  <li>Item8</li>
</ul>

但我试着按升序对它们进行排序，结果如下：

+--------------------+
|                    |
| Item1       Item5  |
|                    |
| Item2       Item6  |
|                    |
| Item3       Item7  |
|                    |
| Item4       Item8  |
|                    |
+--------------------+

不知道如何通过使用CSS+Flexbox实现这一点，除非我需要在混合中添加一些JS

下面是Codepen的演示：

使用列flexbox并设置

ul

的高度-请参见下面的演示：

ul{
列表样式：无；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
宽度：100%；
最大宽度：150px；
高度：8em；
}
李{
保证金：5px；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8

您可以尝试添加高度/最大高度并将方向更改为列，也可以使用列规则：

ul {
  list-style:none;
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
  width: 100%;
  max-width: 150px;
  max-height: 130px;
}

或：

---

我假设您使用的是flexbox，因此容器将沿宽度方向扩展，以水平方向容纳尽可能多的项目；在这种情况下，

flex-direction:column

将不起作用。你可以退房

---

支持很简单，但它是唯一可以做你想做的事情（这就是为什么需要引入它）：

ok cool。是的，我可以发誓我以前做过，但我永远记不起来了。

ul {
  list-style:none;
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
  width: 100%;
  max-width: 150px;
  max-height: 130px;
}

ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}