Referenz:CSS/Eigenschaften/flex-wrap

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft flex-wrap CSS 3.0
Beschreibung 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
default-Wert

nowrap

anwendbar auf flexible Container (Unterschied Tag Element Attribut)
Vererbung nein
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
Spezifikation W3c logo klein.gif flex-wrap property
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, so dass es zu einem Zeilenumbruch kommt. Mit der Eigenschaft flex-wrap: wrap-reverse; kann die Anordnung der Zeilen (nicht der flexiblen Elemente) vertauscht werden.

Beachten Sie

{{{Hinweis}}}

Tipp

{{{Tipp}}}