CSS：排列多行和多列的列表

Question

我的模板文件中有一个简单的有序列表，我无法改变。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

有没有办法像这样订购我的内容：两列，最后一项将始终在第二列。

我尝试过flex，但是我找不到在第三项之后打破流程的方法。有没有办法通过CSS做到这一点，还是我不得不求助于用jQuery攻击它？

Answer 1

您可以使用QUESTION和Identifier使用 Flexbox 执行此操作，此处为Fiddle

更新：这不是一个很好的解决方案，因为如果你的内容溢出WS之一，你必须在父元素上使用固定高度它会破坏布局正如您在此处看到的那样Fiddle 但在某些情况下可能会有用。

flex-direction: column

flex-wrap: wrap

Answer 2

在Nenad Vracar的回答基础上，你可以使用动态数量的元素做同样的事情，而不必使用flex-grow求助于绝对百分比。例如：

ul {
  height: 200px; /* Whatever */
  list-style-type: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  width: 50%;
  flex-grow: 1; /* Height will be distributed evenly */
}

li:last-of-type {
  flex: 0 0 100%; /* Last element will have 100% height,
                  thus occupying a new column */
}

JSFiddle

Answer 3

我在这里乱砍了几个小时，并没有找到一个合适的解决方案，这个解决方案没有涉及容器上的固定高度。我发现最接近的是使用column-count属性并在最后一个元素之前添加一个分栏符，现在只适用于Chrome：

ul {
  -webkit-column-count: 2;
  column-count: 2;
}

li:last-of-type {
  -webkit-column-break-before: always;
}

JSFiddle