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

在纯CSS中，是否可以将列表元素排列成任意数量的列，保留从左到右的顺序，如本例所示

---

是的，理论上应该是可能的

• 由于您希望弹性项按列排列

  #flex容器{flex-flow:column-wrap；}
  

• 但是，元素的顺序将保持垂直（在列中）。由于需要水平排列，因此必须对其重新排序：

  #flex container>：第n个子（4n-2）{顺序：1；}
  #flex容器>：第n个子（4n-1）{顺序：2；}
  #flex容器>：第n个子（4n-0）{顺序：3；}
  

• 然后我们必须强制断列
  根据和，可以通过以下方式强制换行：

  #flex container>：第n个子级（-n+4）{
  分页符之前：始终；/*CSS 2.1语法*/
  在之前中断：始终；/*新语法*/
  }
  

  然而，flexbox中的强制中断尚未得到广泛实施。不过，它可以在Firefox上运行

#柔性容器{
显示器：flex；
柔性流：柱包裹；
}
#flex容器>：第n个子（4n-2）{顺序：1；}
#flex容器>：第n个子（4n-1）{顺序：2；}
#flex容器>：第n个子（4n-0）{顺序：3；}
#flex容器>：第n个子级（-n+4）{
分页符之前：始终；/*旧语法*/
在之前中断：始终；/*新语法*/
边框顶部：1px实心；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10

欢迎使用堆栈溢出！寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。请看@martic，谢谢您的编辑。由于声誉低下，我自己无法添加图像。：）基本上，没有。

flexbox

将允许您拥有包装等的列，但必须手动更改顺序。这最好留给Javascript来做。哇，它实际上是有效的，至少第一部分：<代码>先断后断似乎没有任何效果（在最新的Chrome上测试）。谢谢你，@Oriol@Peter是的，我们必须等待浏览器实现

break-*

属性。