css – 如何在flex列換行佈局中啟動一個新列

我希望我的資料按列排列(從上到下,從左到右),資料中的每個標題都應該開始一個新的列.有三個限制：

>必須使用flex(我需要使用特定於flex的功能)

>無法對資料進行分組(例如,將所有資料項包含在一個div內)

>無法設定固定高度

我的問題是如何在flex-flow：列換行佈局中強制列中斷？

.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;
}
/* my attempt to solve this */
.grid {
height: 76px;
}

<div class="grid">
<div class="head">Column 1 (3 items)</div>
<div class="data">item 1-1</div>
<div class="data">item 1-2</div>
<div class="data">item 1-3</div>
<div class="head">Column 2 (4 items)</div>
<div class="data">item 2-1</div>
<div class="data">item 2-2</div>
<div class="data">item 2-3</div>
<div class="data">item 2-4</div>
<div class="head">Column 3 (2 items)</div>
<div class="data">item 3-1</div>
<div class="data">item 3-2</div>
<div class="head">Column 4 (1 items)</div>
<div class="data">item 4-1</div>
</div>

：

A break is forced wherever the CSS2.107001/07002 [CSS21] or the CSS307003/07004 [CSS3-BREAK] properties specify afragmentation 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 */
}

<div class="grid">
<div class="head">Column 1 (3 items)</div>
<div class="data">item 1-1</div>
<div class="data">item 1-2</div>
<div class="data">item 1-3</div>
<div class="head">Column 2 (4 items)</div>
<div class="data">item 2-1</div>
<div class="data">item 2-2</div>
<div class="data">item 2-3</div>
<div class="data">item 2-4</div>
<div class="head">Column 3 (2 items)</div>
<div class="data">item 3-1</div>
<div class="data">item 3-2</div>
<div class="head">Column 4 (1 items)</div>
<div class="data">item 4-1</div>
</div>