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

Beachten Sie, dass die Werte row und row-reverse von der Richtung des Flex-Containers beeinflusst werden. Wenn das dir Attribut ltr ist, stellt row die horizontale Achse dar, die von links nach rechts orientiert ist, und row-reverse von rechts nach links; wenn das dir Attribut rtl ist, stellt row die Achse dar, die von rechts nach links orientiert ist, 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 entspricht der Textflussrichtung. Die Punkte main-start und main-end sind gleich der Inhaltsrichtung.

row-reverse

Verhält sich wie row, aber die Punkte main-start und main-end sind gegenüber der Inhaltsrichtung entgegengesetzt.

column

Die Hauptachse des Flex-Containers entspricht der Blockachse. Die Punkte main-start und main-end entsprechen den Punkten before und after des Schreibmodus.

column-reverse

Verhält sich wie column, aber die Punkte main-start und main-end sind gegenüber der Inhaltsrichtung entgegengesetzt.

Barrierefreiheit

Die Verwendung der Eigenschaft flex-direction mit den Werten row-reverse oder column-reverse führt zu einer Diskrepanz zwischen der visuellen Darstellung des Inhalts und der DOM-Reihenfolge. Dies wirkt sich negativ auf Benutzer mit Sehbehinderungen aus, die mit Hilfe von unterstützender Technologie wie einem Screenreader navigieren. Wenn die visuelle (CSS) Reihenfolge wichtig ist, haben Screenreader-Benutzer keinen Zugang zur korrekten Lesereihenfolge.

Formale Definition

Anfangswertrow
Anwendbar aufflexible Container
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Umkehren von Flex-Container-Spalten und -Zeilen

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-direction
column
column-reverse
row
row-reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch