Solusi paling sederhana dan paling dapat diandalkan adalah memasukkan item fleksibel di tempat yang tepat. Jika mereka cukup lebar ( width: 100%), mereka akan memaksa garis putus.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(4n - 1) {
background: silver;
}
.line-break {
width: 100%;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="line-break"></div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="line-break"></div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="line-break"></div>
<div class="item">10</div>
</div>
Tapi itu jelek dan tidak semantik. Sebagai gantinya, kita bisa membuat elemen pseudo di dalam wadah fleksibel, dan menggunakannya orderuntuk memindahkannya ke tempat yang tepat.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(3n) {
background: silver;
}
.container::before, .container::after {
content: '';
width: 100%;
order: 1;
}
.item:nth-child(n + 4) {
order: 1;
}
.item:nth-child(n + 7) {
order: 2;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Tetapi ada batasan: wadah fleksibel hanya dapat memiliki ::beforedan ::afterelemen pseudo. Itu berarti Anda hanya dapat memaksa 2 jeda baris.
Untuk mengatasinya, Anda dapat membuat elemen pseudo di dalam item fleksibel alih-alih dalam wadah fleksibel. Dengan cara ini Anda tidak akan terbatas pada 2. Tetapi elemen-elemen semu itu tidak akan menjadi item fleksibel, sehingga mereka tidak akan dapat memaksa jeda baris.
Namun untungnya, CSS Display L3 telah diperkenalkan display: contents(saat ini hanya didukung oleh Firefox 37):
Elemen itu sendiri tidak menghasilkan kotak apa pun, tetapi anak-anak dan elemen semu masih menghasilkan kotak seperti biasa. Untuk keperluan pembuatan dan tata letak kotak, elemen harus diperlakukan seolah-olah telah diganti dengan anak-anak dan elemen semu di pohon dokumen.
Jadi Anda bisa menerapkannya display: contentspada anak-anak wadah fleksibel, dan bungkus masing-masing isi bungkus tambahan. Kemudian, item fleksibel adalah pembungkus tambahan dan elemen pseudo anak-anak.
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
display: contents;
}
.item > div {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px;
}
.item:nth-child(3n) > div {
background: silver;
}
.item:nth-child(3n)::after {
content: '';
width: 100%;
}
<div class="container">
<div class="item"><div>1</div></div>
<div class="item"><div>2</div></div>
<div class="item"><div>3</div></div>
<div class="item"><div>4</div></div>
<div class="item"><div>5</div></div>
<div class="item"><div>6</div></div>
<div class="item"><div>7</div></div>
<div class="item"><div>8</div></div>
<div class="item"><div>9</div></div>
<div class="item"><div>10</div></div>
</div>
Atau, menurut Fragmenting Flex Layout dan CSS Fragmentation , Flexbox memungkinkan pemutusan paksa dengan menggunakan break-before, break-afteratau alias CSS 2.1 mereka:
.item:nth-child(3n) {
page-break-after: always; /* CSS 2.1 syntax */
break-after: always; /* New syntax */
}
.container {
background: tomato;
display: flex;
flex-flow: row wrap;
align-content: space-between;
justify-content: space-between;
}
.item {
width: 100px;
background: gold;
height: 100px;
border: 1px solid black;
font-size: 30px;
line-height: 100px;
text-align: center;
margin: 10px
}
.item:nth-child(3n) {
page-break-after: always;
background: silver;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
Pemutusan saluran secara paksa di flexbox belum didukung secara luas, tetapi bekerja pada Firefox.
