CSS flex-direction Eigenschaft

Die Eigenschaft flex-direction legt die Hauptachse eines Flex-Containers fest — also die Richtung, entlang derer die Flex-Elemente angeordnet werden. Indem man die Hauptachse zwischen horizontal und vertikal umschaltet (und optional umkehrt), steuert eine einzige Eigenschaft, ob Elemente in einer Zeile oder einer Spalte fließen. Sie gehört zu den CSS3-Eigenschaften und ist Teil des Flexible Box Layout-Moduls.

Die Eigenschaft hat allein keinen Effekt — das Element muss zunächst ein Flex-Container sein, den man mit display: flex (oder inline-flex) erstellt. Ist das gesetzt, wird jedes direkte Kindelement zu einem Flex-Element, das der gewählten Richtung folgt.

Flex-Elemente können angezeigt werden:

horizontal von links nach rechts (flex-direction: row) oder von rechts nach links (flex-direction: row-reverse)
vertikal von oben nach unten (flex-direction: column) oder von unten nach oben (flex-direction: column-reverse)

Hauptachse und Querachse

Flexbox arbeitet immer mit zwei Achsen. Die Hauptachse wird durch flex-direction bestimmt; Elemente werden nacheinander entlang ihr platziert. Die Querachse verläuft senkrecht dazu. Das ist wichtig, weil die Ausrichtungseigenschaften davon abhängen, welche Achse welche ist:

justify-content richtet Elemente entlang der Hauptachse aus.
align-items richtet Elemente entlang der Querachse aus.

Wenn man flex-direction: column setzt, wird die Hauptachse vertikal — und justify-content steuert nun die vertikale Positionierung, während align-items die horizontale Positionierung steuert. Die falsche Eigenschaft zu verwenden ist der häufigste Flexbox-Fehler, und er lässt sich fast immer auf den aktiven flex-direction-Wert zurückführen.

Die *-reverse-Werte kehren die Reihenfolge um, in der Elemente gerendert werden, ändern jedoch nicht die Quellreihenfolge des HTML — das ist für die Barrierefreiheit wichtig, da Screenreader und Tastaturfokus weiterhin der DOM-Reihenfolge folgen, nicht der visuellen.

Info

Gibt es keine Flex-Elemente (der Container hat keine direkten Kindelemente), hat die Eigenschaft flex-direction keinen sichtbaren Effekt.

Anfangswert	row
Gilt für	Flex-Container.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.flexDirection = "row-reverse";

Syntax

Syntax der CSS-Eigenschaft flex-direction

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

Beispiel der flex-direction-Eigenschaft:

Beispiel der CSS-Eigenschaft flex-direction mit dem Wert column-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Probier es selbst »

Im folgenden Beispiel werden die Elemente horizontal als Zeile von rechts nach links angezeigt.

Beispiel der flex-direction-Eigenschaft mit dem Wert "row-reverse":

Beispiel der CSS-Eigenschaft flex-direction mit dem Wert row-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

Das folgende Bild zeigt die Elemente in umgekehrter Reihenfolge von rechts nach links.

Beispiel der flex-direction-Eigenschaft mit dem Wert "row":

Beispiel der flex-direction-Eigenschaft mit dem Wert "row"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel der flex-direction-Eigenschaft mit dem Wert "column":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Probier es selbst »

Beispiel der flex-direction-Eigenschaft mit dem Wert "column-reverse":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 340px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Probier es selbst »

Wann welcher Wert zu verwenden ist

row (Standard) — horizontale Navigationsleisten, Schaltflächengruppen und alle "Links-nach-rechts-Listen". Man schreibt ihn selten explizit, da er bereits der Standardwert ist.
column — Karten, Formularfelder oder Sidebar-Einträge vertikal stapeln und dabei dennoch Flexbox-Ausrichtung und gap-Kontrolle nutzen. Ein häufiges Muster ist ein ganzseitiges Layout: display: flex; flex-direction: column; min-height: 100vh mit einem Header, einem flex: 1-Hauptbereich und einem Footer.
row-reverse / column-reverse — die visuelle Reihenfolge umkehren, ohne das HTML zu verändern, zum Beispiel beim Spiegeln eines Layouts für Rechts-nach-links-Sprachen oder um die neueste Chat-Nachricht unten anzuzeigen, während der DOM in chronologischer Reihenfolge bleibt.

Ein verwandtes Kurzschreibweise, flex-flow, setzt flex-direction und flex-wrap in einer Deklaration — praktisch, wenn Elemente auch auf mehrere Zeilen umbrechen sollen.

Browser-Unterstützung

flex-direction wird in allen modernen Browsern ohne Hersteller-Präfix unterstützt. Es ist Teil des umfassenderen Flexbox-Modells, das im Ultimativen Leitfaden zu Flexbox behandelt wird.

Werte

Wert	Beschreibung	Ausprobieren
row	Elemente werden horizontal als Zeile angezeigt. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
row-reverse	Elemente werden in umgekehrter Reihenfolge als Zeile angezeigt (von rechts nach links).	Ausprobieren »
column	Elemente werden vertikal von oben nach unten angezeigt.	Ausprobieren »
column-reverse	Elemente werden vertikal von unten nach oben angezeigt.	Ausprobieren »
initial	Die Eigenschaft verwendet ihren Standardwert.	Ausprobieren »
inherit	Die Eigenschaft erbt den Wert vom übergeordneten Element.	Ausprobieren »

Übungen

Übung

Welche der folgenden Werte sind gültige Werte für die CSS-Eigenschaft flex-direction?