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>
break-before
orbreak-after
property
:
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>
程式碼日誌版權宣告:
翻譯自:http://stackoverflow.com/questions/27119691/how-to-start-a-new-column-in-flex-column-wrap-layout