CSS flex-flow Eigenschaft

Definition und Verwendung

Das flex-flow-Attribut ist eine Abkürzung für die folgenden Attribute:

Anmerkung:Wenn das Element kein flexibles Element ist, ist das flex-Attribut ungültig.

Weitere Informationen:

CSS-Tutorial:CSS-Flexbox

CSS Referenzhandbuch:flex-Eigenschaft

CSS Referenzhandbuch:flex-direction-Eigenschaft

CSS Referenzhandbuch:flex-basis-Eigenschaft

CSS Referenzhandbuch:flex-grow-Eigenschaft

CSS Referenzhandbuch:flex-shrink-Eigenschaft

CSS Referenzhandbuch:flex-wrap-Eigenschaft

HTML DOM Referenzhandbuch:flexFlow-Eigenschaft

Beispiel

Zeige flexible Elemente in umgekehrter Richtung an und breche um, wenn erforderlich:

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

Probieren Sie es selbst aus

CSS-Syntax

flex-flow: flex-direction flex-wrap|initial|inherit;

Attributwert

Wert Beschreibung
flex-direction

Mögliche Werte:

  • row
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit

Der Standardwert ist "row".

Legt die Richtung der flexiblen Elemente fest.
flex-wrap

Mögliche Werte:

  • nowrap
  • wrap
  • wrap-reverse
  • initial
  • inherit

Der Standardwert ist "nowrap".

Legt fest, ob der flexible Item umgebrochen werden soll.
initial Setzen Sie diese Eigenschaft auf ihren Standardwert. Siehe initial.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: row nowrap
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationseigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.flexFlow="column nowrap"

Browserunterstützung

Die Zahlen in der Tabelle verweisen auf die erste Browserversion, die die Eigenschaft vollständig unterstützt.

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt. Verwenden Sie vor der Nummer die Präfixe -webkit-, -ms- oder -moz-.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0