css - 无序列表 : Limiting the number of List-items before starting a new column

Question

我的脑子炸了，如果这看起来非常简单，我深表歉意:

我有一个无序列表:

<ul class="activeList">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
</ul>

我要做的就是让它垂直显示成两列，但在第 4 项之后，开始第二列。所以它看起来像这样:

Item 1   |   Item 5
Item 2   |   Item 6
Item 3   |
Item 4   |

我在 CSS 中尝试过 float 和列，但我能得到的最好的是:

Item 1   |   Item 4
Item 2   |   Item 5
Item 3   |   Item 6

我希望它能在 4 列结束，然后开始下一列。
我希望找到一个纯 CSS 解决方案。

Answer 1

我通过使用 flex-wrap 和第 n 个 child 实现了这一点。看看代码笔，应该是不言自明的。如果没有，请告诉我!这样做的好处是，如果您需要的不仅仅是 2 列，它也能正常工作。

参见演示和 codepen :

.activeList{
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;  
}

.item:nth-child(3n){
  page-break-after:always; 
  break-after: always;
}

<ul class="activeList">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
</ul>