按升序排列的 Flexbox 列

Question

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

<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>

我试图让它们使用 flexbox 分成两列，结果如下：

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

但我试图按升序对它们进行排序，因此它看起来像这样：

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

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

这是 Codepen 上的演示：

https://codepen.io/ultraloveninja/pen/drKLzG

Answer 1

使用 column flexbox 并为 ul 设置高度 - 请参见下面的演示：

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

li {
  margin: 5px;
}

<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>

或者您可以使用 CSS columns - 请参阅下面的演示：

ul {
  list-style: none;
  columns: 2; /* added this */
  width: 100%;
  max-width: 150px;
  height: 8em;
}

li {
  margin: 5px;
}

<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>

Answer 2

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

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;
}

Answer 3

我假设您使用的是 flexbox，这样容器将在宽度方向扩展以水平容纳尽可能多的项目；在这种情况下，flex-direction:column 将不起作用。您可以查看 https://www.w3schools.com/css/css3_multiple_columns.asp

支持不足，但它是唯一可以做你想做的事情（这就是为什么需要引入它）：https://caniuse.com/#search=column

Answer 4

上面的这个解决方案最适合我：

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

按升序排列的 Flexbox 列

Flexbox columns in ascending order

html

css

flexbox

css-multicolumn-layout