html选择字段至左边的列表,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; }

>然后我们必须强制分栏.

#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;

}

1

2

3

4

5

6

7

8

9

10