css - 将列表项显示为列

Question

我需要按特定顺序在列中显示列表项。

例如，我有这样的代码:

<div style="height:400px;">
<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
</ul>
</div>

我想将其显示在三列中，如下所示:

1   5
2   6
3   
4

或者当有更多元素时:

1  5  9
2  6  10
3  7  11
4  8

列数+列宽不起作用，因为它尝试显示水平填充的列表，而我需要以垂直顺序显示它(如果没有第二列或第三列，则打开)。

有解决办法吗？

Answer 1

我有一个使用 Flexbox 的解决方案。它要求你的 ul 有指定的高度。

ul {
    display: flex;
    list-style: none;
    flex-direction: column;
    flex-wrap: wrap;

    height: 400px;
}

li {
    flex-basis: 25%;
}

“flex-direction:column”导致元素垂直堆叠。当一个列被填充时，“flex-wrap:wrap”使它们换行到下一列。列表项上的“flex-basis: 25%”使得每个元素的高度都是父项高度的四分之一。因此，如果您希望每列增加或减少行数，则可以更改此数字。