CSS flex-direction-Eigenschaft

Die flex-direction-Eigenschaft definiert die Hauptachse eines flex-Containers und legt die Reihenfolge der Flex-Elemente fest. Sie gehört zu den CSS3-Eigenschaften. Diese Eigenschaft ist Teil des Flexible Box Layout-Moduls.

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)

INFO

Wenn keine flexiblen Elemente vorhanden sind, hat die flex-direction-Eigenschaft keine Auswirkung.

Anfangswert	row
Anwendbar auf	Flex-Container.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.flexDirection = "row-reverse";

Syntax

Syntax der CSS flex-direction-Eigenschaft

css

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

Beispiel für die flex-direction-Eigenschaft:

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

html

<!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>

Try it Yourself »

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

Beispiel für die flex-direction-Eigenschaft mit dem Wert „row-reverse“:

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

html

<!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>

Try it Yourself »

Ergebnis

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

CSS flex-direction-Eigenschaft

Beispiel für die flex-direction-Eigenschaft mit dem Wert „row“:

Beispiel der flex-direction-Eigenschaft mit dem Wert „row“

html

<!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>

Try it Yourself »

Beispiel für die flex-direction-Eigenschaft mit dem Wert „column“:

Beispiel der flex-direction-Eigenschaft mit dem Wert „column“

html

<!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>

Try it Yourself »

Beispiel für die flex-direction-Eigenschaft mit dem Wert „column-reverse“:

Beispiel der flex-direction-Eigenschaft mit dem Wert „column-reverse“

html

<!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>

Try it Yourself »

Werte

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

CSS flex-direction-Eigenschaft ​

Syntax ​

Beispiel für die flex-direction-Eigenschaft: ​

Beispiel für die flex-direction-Eigenschaft mit dem Wert „row-reverse“: ​

Ergebnis ​

Beispiel für die flex-direction-Eigenschaft mit dem Wert „row“: ​

Beispiel für die flex-direction-Eigenschaft mit dem Wert „column“: ​

Beispiel für die flex-direction-Eigenschaft mit dem Wert „column-reverse“: ​

Werte ​

Practice ​

CSS flex-direction-Eigenschaft

Syntax

Beispiel für die flex-direction-Eigenschaft:

Beispiel für die flex-direction-Eigenschaft mit dem Wert „row-reverse“:

Ergebnis

Beispiel für die flex-direction-Eigenschaft mit dem Wert „row“:

Beispiel für die flex-direction-Eigenschaft mit dem Wert „column“:

Beispiel für die flex-direction-Eigenschaft mit dem Wert „column-reverse“:

Werte

Practice