在纯CSS中是否可以将列表元素布局到任意数量的列,保留从左到右的顺序,如本示例所示？
解决方法
是的,理论上应该是可能的.
>由于您希望灵活项目按列排列,
#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>
