如何将列表项显示为保留从左到右顺序的列？答案

【问题标题】：How to display list items as columns preserving the left-to-right order?如何将列表项显示为保留从左到右顺序的列？
【发布时间】：2015-06-18 10:19:17
【问题描述】：

是否可以在纯 CSS 中将列表元素布局到任意数量的列，并保持从左到右的顺序，就像这个例子一样？

【问题讨论】：

欢迎来到 Stack Overflow！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
@martic，感谢您的编辑。由于我的声誉低，我无法自己添加图像。 :)
基本上，没有。 flexbox 将允许您拥有包装等的列，但必须手动更改顺序。这最好留给 Javascript。

标签： css list multiple-columns flexbox

【解决方案1】：

是的，理论上应该是可以的。

由于您希望弹性项目按列排列，

#flex-container { flex-flow: column wrap; }

但随后元素的顺序将垂直保留（以列为单位）。既然你想要水平，它们必须重新排序：

#flex-container > :nth-child(4n - 2) { order: 1; }
#flex-container > :nth-child(4n - 1) { order: 2; }
#flex-container > :nth-child(4n - 0) { order: 3; }

然后我们必须强制分栏。

根据10. Fragmenting Flex Layout和CSS Fragmentation，可以用break-before强制换行：
```
#flex-container > :nth-child(-n + 4) {
  page-break-before: always; /* CSS 2.1 syntax */
  break-before: always;  /* New syntax */
}
```
然而，flexbox 中的强制中断尚未广泛实施。不过，它适用于 Firefox。

#flex-container {
  display: flex;
  flex-flow: column wrap;
}
#flex-container > :nth-child(4n - 2) { order: 1; }
#flex-container > :nth-child(4n - 1) { order: 2; }
#flex-container > :nth-child(4n - 0) { order: 3; }
#flex-container > :nth-child(-n + 4) {
  page-break-before: always; /* Old syntax */
  break-before: always;  /* New syntax */
  border-top: 1px solid;
}

<div id="flex-container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
</div>

【讨论】：

哇，它确实有效，至少在第一部分：CodePen example。 break-before 似乎没有任何效果（在最新的 Chrome 上测试）。谢谢你，@Oriol！
@Peter 是的，我们将不得不等到浏览器实现 break-* 属性。