CSS flex-direction Eigenschaft

Definition und Verwendung

Die Eigenschaft flex-direction legt die Richtung der elastischen Projekte fest.

Anmerkung:Wenn das Element kein elastisches Projekt ist, ist die flex-Eigenschaft ungültig.

Siehe auch:

CSS Tutorial:CSS Flexbox

CSS Referenzhandbuch:flex-Eigenschaft

CSS Referenzhandbuch:flex-basis-Eigenschaft

CSS Referenzhandbuch:flex-flow-Eigenschaft

CSS Referenzhandbuch:flex-grow-Eigenschaft

CSS Referenzhandbuch:flex-shrink-Eigenschaft

CSS Referenzhandbuch:flex-wrap-Eigenschaft

HTML DOM Referenzhandbuch:flexDirection-Eigenschaft

Beispiel

Setzen Sie die Richtung der flexiblen Elemente im <div>-Element umgekehrt fest:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Versuchen Sie es selbst

CSS-Syntax

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Eigenschaftswert

Wert Beschreibung
row Standardwert. Als Zeile, horizontal anzeigen der flexiblen Elemente.
row-reverse Gleiche Zeilen, aber umgekehrte Richtung.
column Als Spalte, vertikal anzeigen der flexiblen Elemente.
column-reverse Gleiche Spalten, aber umgekehrte Richtung.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft von ihrem übergeordneten Element erben. Siehe inherit.

Technische Details

Standardwert: row
Vererbung: Nein
Animationserstellung: Nicht unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.flexDirection="column-reverse"

Mehr Beispiele

Kombinieren Sie flex-direction und Media Queries, um verschiedene Layouts für verschiedene Bildschirmgrößen/Geräte zu erstellen:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Responsives Layout - Erstellen Sie eine einzeilige Anordnung (100%) anstatt einer zweizeiligen Anordnung (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Versuchen Sie es selbst

Browser-Unterstützung

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

Zahlen mit -webkit- oder -moz- als Präfix stellen die erste Version dar, die das Präfix verwendet.

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