Найпростішим і надійним рішенням є вставлення гнучких предметів у потрібні місця. Якщо вони досить широкі ( width: 100%), вони змусять перервати лінію.
.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>
Але це потворно і не смислово. Натомість ми можемо генерувати псевдоелементи всередині контейнера flex і використовувати їх orderдля переміщення в потрібні місця.
.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>
Але є обмеження: контейнер flex може мати лише a ::beforeі a::after псевдоелемент. Це означає, що ви можете примусити лише 2 перерви лінії
Щоб вирішити це, ви можете генерувати псевдоелементи всередині елементів flex, а не в контейнері flex. Таким чином ви не обмежуватиметесь 2. Але ці псевдоелементи не будуть гнучкими елементами, тому вони не зможуть примусити розривів рядків.
Але на щастя, CSS Display L3 представивdisplay: contents (на даний момент підтримується лише Firefox 37):
Сам елемент не генерує жодних коробок, але його дочірні та псевдоелементи все ще генерують поля як звичайні. Для створення генерації та компонування, елемент повинен розглядатися так, ніби він був замінений його дочірніми та псевдоелементами у дереві документів.
Таким чином, ви можете застосувати display: contentsдо дітей гнучку ємність і загортати вміст кожного з них всередину додаткової обгортки. Тоді гнучкими предметами стануть ті додаткові обгортки та псевдоелементи дітей.
.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>
Крім того , в відповідно до фрагментуються Flex Layout і CSS фрагментація , Flexbox дозволяє змушені перерви за допомогою break-before, break-afterабо їх псевдонімами CSS 2.1:
.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>
Примусові перерви у флексбоксі ще не підтримуються широко, але це працює на Firefox.
