flex 固定一列_css – 如何在flex列换行布局中启动一个新列

显然,the correct solution is to use the break-before or break-after property：

A break is forced wherever the CSS2.1

07001/07002 [CSS21] or the CSS3

07003/07004 [CSS3-BREAK] properties specify a

fragmentation break.

在撰写本文时,大多数浏览器都会错误地实现* -break- *属性,或者根本不实现它们.在此之前考虑这个答案.

以下演示工作原理：

> FF33

.grid {

display: flex;

flex-direction: column;

flex-wrap: wrap;

}

.grid .head {

width: 25%;

background: orange;

border-bottom: thin dotted;

}

.grid .data {

width: 25%;

background: yellow;

border-bottom: thin dotted;

}

/* force column breaks */

.grid .head:nth-child(n + 2) {

page-break-before: always; /* FF33 */

}

Column 1 (3 items)

item 1-1

item 1-2

item 1-3

Column 2 (4 items)

item 2-1

item 2-2

item 2-3

item 2-4

Column 3 (2 items)

item 3-1

item 3-2

Column 4 (1 items)

item 4-1