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

css
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

Anfangswertnowrap
Anwendbar aufflexible Container
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

flex-wrap = 
nowrap |
wrap |
wrap-reverse

Beispiele

Festlegen von Wrap-Werten für Flex-Container

HTML

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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-wrap
nowrap
wrap
wrap-reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch