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

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和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>