Die einfachste und zuverlässigste Lösung ist das Einsetzen von Flex-Elementen an den richtigen Stellen. Wenn sie breit genug sind ( width: 100%), erzwingen sie einen Zeilenumbruch.
.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>
Aber das ist hässlich und nicht semantisch. Stattdessen könnten wir Pseudoelemente im Flex-Container erzeugen und verwenden order, um sie an die richtigen Stellen zu verschieben.
.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>
Es gibt jedoch eine Einschränkung: Der Flex-Container kann nur ein ::beforeund ein ::afterPseudoelement haben. Das heißt, Sie können nur 2 Zeilenumbrüche erzwingen.
Um dies zu lösen, können Sie die Pseudoelemente innerhalb der Flex-Elemente anstatt im Flex-Container generieren. Auf diese Weise sind Sie nicht auf 2 beschränkt. Diese Pseudoelemente sind jedoch keine flexiblen Elemente, sodass sie keine Zeilenumbrüche erzwingen können.
Glücklicherweise hat CSS Display L3 eingeführt display: contents(derzeit nur von Firefox 37 unterstützt):
Das Element selbst generiert keine Boxen, aber seine untergeordneten Elemente und Pseudoelemente generieren weiterhin wie gewohnt Boxen. Für die Boxgenerierung und das Layout muss das Element so behandelt werden, als ob es im Dokumentbaum durch seine untergeordneten Elemente und Pseudoelemente ersetzt worden wäre.
So können Sie sich display: contentsan die Kinder des Flex-Containers wenden und den Inhalt jedes einzelnen in einen zusätzlichen Wrapper einwickeln. Dann sind die flexiblen Elemente diese zusätzlichen Wrapper und die Pseudoelemente der Kinder.
.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>
Alternativ kann gemäß Fragmenting Flex - Layout und CSS Fragmentation , ermöglicht Flexbox Brüche unter Verwendung gezwungen break-before, break-afteroder ihre CSS 2.1 Aliase:
.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>
Erzwungene Zeilenumbrüche in der Flexbox werden noch nicht allgemein unterstützt, funktionieren jedoch unter Firefox.
