flex-wrap CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.
Die flex-wrap CSS-Eigenschaft legt fest, ob Flex-Elemente auf eine Zeile gezwungen werden oder auf mehrere Zeilen umbrechen können. Wenn ein Umbruch erlaubt ist, wird die Richtung festgelegt, in der die Zeilen gestapelt werden.
Probieren Sie es aus
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
display: flex;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
width: 60px;
margin: 10px;
}
Die Kurzschreibweise der Eigenschaft flex-flow kann verwendet werden, um sowohl die Eigenschaften flex-direction als auch flex-wrap festzulegen, die jeweils die Haupt- und Nebenachsen des Flex-Containers definieren.
Syntax
flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;
Werte
Die flex-wrap-Eigenschaft wird als ein einzelnes Schlüsselwort festgelegt, das aus den folgenden Werten ausgewählt wird:
nowrap-
Die Flex-Elemente werden in einer einzigen Zeile ausgelegt, was dazu führen kann, dass der Flex-Container überläuft. Der Kreuzstart entspricht dem inline-start oder block-start, abhängig vom Wert der
flex-direction. Dies ist der Standardwert. wrap-
Die Flex-Elemente brechen in mehrere Zeilen um. Der Kreuzstart entspricht dem inline-start oder block-start, abhängig vom aktuellen Schreibmodus und vom Wert der
flex-direction. wrap-reverse-
Verhält sich wie
wrap, aber Kreuzstart und Kreuzende sind vertauscht.
Formale Definition
| Anfangswert | nowrap |
|---|---|
| Anwendbar auf | flexible Container |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
flex-wrap =
nowrap |
wrap |
wrap-reverse
Beispiele
Flex-Container-Umbruchwerte festlegen
HTML
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
CSS
/* Common Styles */
.content,
.content1,
.content2 {
color: white;
font: 100 24px/100px sans-serif;
height: 150px;
width: 897px;
text-align: center;
}
.content div,
.content1 div,
.content2 div {
height: 50%;
width: 300px;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
/* Flexbox Styles */
.content {
display: flex;
flex-wrap: wrap;
}
.content1 {
display: flex;
flex-wrap: nowrap;
}
.content2 {
display: flex;
flex-wrap: wrap-reverse;
}
Ergebnisse
Spezifikationen
| Spezifikation |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |