Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Dieflex-wrapCSS Eigenschaft legt fest, ob Flex-Elemente in eine einzige Zeile gezwungen werden oder auf mehrere Zeilen umbrechen können. Wenn Umbrüche erlaubt sind, legt sie die Richtung fest, in der die Zeilen gestapelt werden.
Probieren Sie es aus
flex-wrap: nowrap;flex-wrap: wrap;flex-wrap: wrap-reverse;<section> <div> <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 derflex-flow Eigenschaft kann sowohl die Eigenschaftenflex-direction als auchflex-wrap festlegen, 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
Dieflex-wrap Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus den folgenden Werten ausgewählt wird:
nowrapDie Flex-Elemente werden in einer einzigen Zeile angeordnet, was dazu führen kann, dass der Flex-Container überläuft. Der Querstart entsprichtinline-start oder block-start, abhängig vom Wert von
flex-direction. Dies ist der Standardwert.wrapDie Flex-Elemente werden in mehrere Zeilen umbrochen. Der Querstart entsprichtinline-start oder block-start, abhängig vom aktuellenSchreibmodus und dem Wert von
flex-direction.wrap-reverseVerhält sich genauso wie
wrap, aber Querstart und Querend 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
Wrap-Werte für Flex-Container festlegen
HTML
<h4>This is an example for flex-wrap:wrap</h4><div> <div>1</div> <div>2</div> <div>3</div></div><h4>This is an example for flex-wrap:nowrap</h4><div> <div>1</div> <div>2</div> <div>3</div></div><h4>This is an example for flex-wrap:wrap-reverse</h4><div> <div>1</div> <div>2</div> <div>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
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |