flex-wrap
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
Die flex-wrap CSS Eigenschaft legt fest, ob Flex-Elemente in einer Zeile erzwungen werden oder auf mehrere Zeilen umgebrochen werden können. Falls ein Umbruch erlaubt ist, legt sie die Richtung fest, in der die Zeilen gestapelt werden.
Probieren Sie es aus
Die Kurzschrift-Eigenschaft flex-flow kann verwendet werden, um sowohl die Eigenschaften flex-direction als auch flex-wrap festzulegen, die jeweils die Haupt- und Querachsen 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 Eigenschaft flex-wrap wird als ein einzelnes Schlüsselwort angegeben, das aus den folgenden Werten ausgewählt wird:
nowrap-
Die Flex-Elemente sind in einer einzigen Zeile angeordnet, was dazu führen kann, dass der Flex-Container überfließt. Der Querstart entspricht 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 Querstart entspricht inline-start oder block-start, abhängig vom aktuellen Schreibmodus und dem Wert der
flex-direction. wrap-reverse-
Verhält sich wie
wrap, jedoch sind Querstart und Querende invertiert.
Formale Definition
| Anfangswert | nowrap |
|---|---|
| Anwendbar auf | flexible Container |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
Beispiele
Festlegen von Wrap-Werten für Flex-Container
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: #fff;
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
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |
Browser-Kompatibilität
BCD tables only load in the browser