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

Question

是否可以在纯 CSS 中将列表元素布局到任意数量的列，并保持从左到右的顺序，如本例所示？

Answer 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 and CSS Fragmentation, line breaks can be forced with 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>

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

How to display list items as columns preserving the left-to-right order?

css

list

multiple-columns

flexbox