CSS/Eigenschaften/flex-wrap

Die Eigenschaft flex-wrap legt fest, ob sich die flexiblen Elemente an die Breite der Zeile anpassen sollen, oder ihre vorgegebene Breite darstellen sollen. In diesem Fall kommt es zu einem Zeilenumbruch.

erlaubte Werte	nowrap: kein Umbruch wrap: Umbruch wrap-reverse: Umbruch, Anordnung der Zeilen (nicht der flexiblen Elemente) wird vertauscht initial inherit Vererbung steuernde Werte inherit, initial, unset und revert Defaultwert: nowrap
anwendbar auf	flexible Container (Unterschied Tag Element Attribut)
Browsersupport	Details: caniuse.com
Vererbung	nein
animierbar	nein

Beispiel

  .genau {
    flex-wrap: wrap;
  }
   .andersrum {
    flex-wrap: wrap-reverse;
  }

Im Beispiel hat die erste Reihe den Standardwert nowrap, da flex-wrap nicht festgelegt wurde. Deshalb werden die festgelegten Breiten ignoriert und passen sich die flexiblen Elemente an die Breite des Eltern-Container an.

Die zweite Reihe mit der Eigenschaft flex-wrap: wrap; stellt die Elemente mit ihren festgelegten Breiten dar, sodass es zu einem Zeilenumbruch kommt.

Mit der Eigenschaft flex-wrap: wrap-reverse; kann die Anordnung der Zeilen (nicht der flexiblen Elemente) vertauscht werden.

Weblinks

• Spezifikation (W3C): CSS Flexible Box Layout Module Level 1 - flex-wrap-property
• MDN: flex-wrap

Siehe auch

• CSS/Tutorials/Flexbox/Flex-Container