flex-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die flex-direction CSS Eigenschaft legt fest, wie Flex-Elemente im Flex-Container platziert werden, indem sie die Hauptachse und die Richtung (normal oder umgekehrt) definiert.

Probieren Sie es aus

flex-direction: row; 
flex-direction: row-reverse; 
flex-direction: column; 
flex-direction: column-reverse; 
<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> <div>Item One</div> <div>Item Two</div> <div>Item Three</div> </div> </section> 
#example-element { border: 1px solid #c5c5c5; width: 80%; display: flex; } #example-element > div { background-color: rgb(0 0 255 / 0.2); border: 3px solid blue; width: 60px; margin: 10px; }

Beachten Sie, dass die Werte row und row-reverse von der Ausrichtung des Flex-Containers beeinflusst werden. Wenn das dir Attribut auf ltr gesetzt ist, repräsentiert row die horizontale Achse von links nach rechts und row-reverse von rechts nach links; wenn das dir Attribut auf rtl gesetzt ist, repräsentiert row die Achse von rechts nach links und row-reverse von links nach rechts.

Syntax

css
/* The direction text is laid out in a line */ flex-direction: row; /* Like <row>, but reversed */ flex-direction: row-reverse; /* The direction in which lines of text are stacked */ flex-direction: column; /* Like <column>, but reversed */ flex-direction: column-reverse; /* Global values */ flex-direction: inherit; flex-direction: initial; flex-direction: revert; flex-direction: revert-layer; flex-direction: unset;

Werte

Die folgenden Werte werden akzeptiert:

row

Die Hauptachse des Flex-Containers ist dieselbe wie die Textrichtung. Die Punkte main-start und main-end sind dieselben wie die Inhaltsrichtung.

row-reverse

Verhält sich wie row, aber die Punkte main-start und main-end sind entgegengesetzt zur Inhaltsrichtung.

column

Die Hauptachse des Flex-Containers ist dieselbe wie die Block-Achse. Die Punkte main-start und main-end sind dieselben wie die Punkte before und after der Schreibrichtung.

column-reverse

Verhält sich wie column, aber die Punkte main-start und main-end sind entgegengesetzt zur Inhaltsrichtung.

Barrierefreiheit

Die Verwendung der flex-direction Eigenschaft mit den Werten row-reverse oder column-reverse führt zu einer Trennung zwischen der visuellen Darstellung des Inhalts und der DOM-Reihenfolge. Dies beeinträchtigt Nutzer mit Sehbehinderungen, die auf unterstützende Technologien wie einen Screenreader angewiesen sind. Wenn die visuelle (CSS) Reihenfolge wichtig ist, haben Screenreader-Nutzer keinen Zugriff auf die korrekte Lesereihenfolge.

Formale Definition

Anfangswertrow
Anwendbar aufflexible Container
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

flex-direction = 
 row |
 row-reverse |
 column |
 column-reverse

Beispiele

Umkehrung von Flex-Container-Spalten und -Reihen

HTML

html
<h4>This is a Column-Reverse</h4> <div id="col-rev" class="content"> <div class="box red">A</div> <div class="box lightblue">B</div> <div class="box yellow">C</div> </div> <h4>This is a Row-Reverse</h4> <div id="row-rev" class="content"> <div class="box red">A</div> <div class="box lightblue">B</div> <div class="box yellow">C</div> </div>

CSS

css
.content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; } .box { width: 50px; height: 50px; } #col-rev { flex-direction: column-reverse; } #row-rev { flex-direction: row-reverse; } .red { background-color: red; } .lightblue { background-color: lightblue; } .yellow { background-color: yellow; }

Ergebnis

Spezifikationen

Specification
CSS Flexible Box Layout Module Level 1
# flex-direction-property

Browser-Kompatibilität

Siehe auch