Самое простое и надежное решение - вставлять гибкие элементы в нужных местах. Если они достаточно широкие ( 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>
Но есть ограничение: гибкий контейнер может иметь только псевдоэлемент ::beforeи ::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>
Принудительные разрывы строк во flexbox пока широко не поддерживаются, но это работает в Firefox.
