flex-wrap

Die Eigenschaft flex-wrap ist eine Untereigenschaft des Flexible Box Layout Module. Sie definiert, ob die Flex-Items in einer einzigen Zeile erzwungen werden oder in mehrere Zeilen fließen können. Wenn sie auf mehrere Zeilen gesetzt wird, definiert sie auch die Querachse, die die Richtung bestimmt, in der neue Zeilen gestapelt werden, was das reaktionsfähige Layoutverhalten ohne CSS-Medienabfragen erleichtert.

.flex-container {
  flex-wrap: wrap;
}

Erinnerung: Die Querachse ist die Achse, die senkrecht zur Hauptachse verläuft. Ihre Richtung hängt von der Richtung der Hauptachse ab.

Syntax

flex-wrap: nowrap | wrap | wrap-reverse

• Ursprünglicher Wert: nowrap
• Gilt für: Flex-Container
• Vererbt: nein
• Berechneter Wert: wie angegeben
• Animationstyp: diskret

Werte

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;

• nowrap (Standard): Einzelne Zeile, die dazu führen kann, dass der Container überläuft
• wrap: Mehrere Zeilen, die Richtung wird durch flex-direction bestimmt
• wrap-reverse: Mehrere Zeilen, entgegengesetzt zur durch flex-direction bestimmten Richtung

Demo

In der folgenden Demo

• Die rote Liste ist auf nowrap gesetzt
• Die gelbe Liste ist auf wrap gesetzt
• Die blaue Liste ist auf wrap-reverse gesetzt

Die flex-direction ist auf den Standardwert gesetzt: row.

Browser-Unterstützung

Weitere Informationen darüber, wie Sie Synthesen kombinieren können, um die beste Browserunterstützung zu erzielen, finden Sie in unserem Artikel „Using Flexbox“.

Verwandte Anleitungen

Verwandte Tricks

Weitere Ressourcen

• CSS Flexible Box Module Level 1 (W3C)
• flex-wrap (MDN)
• Verbessern Sie die Reaktionsfähigkeit mit flex-wrap in CSS (DigitalOcean)

Verwandt