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 angeordnet 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 Richtung des Flex-Containers beeinflusst werden. Wenn das dir Attribut ltr ist, repräsentiert row die horizontale Achse, die von links nach rechts orientiert ist, und row-reverse von rechts nach links; wenn das dir Attribut rtl ist, repräsentiert row die Achse, 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 ist dieselbe wie die Textausrichtung. Die main-start und main-end Punkte sind dieselben wie die Inhaltsrichtung.
row-reverse: Verhält sich wie row, aber die main-start und main-end Punkte sind entgegengesetzt zur Inhaltsrichtung.
column: Die Hauptachse des Flex-Containers ist dieselbe wie die Block-Achse. Die main-start und main-end Punkte sind dieselben wie die before und after Punkte des Schreibmodus.
column-reverse: Verhält sich wie column, aber die main-start und main-end sind entgegengesetzt zur Inhaltsrichtung.

Barrierefreiheit

Die Verwendung der flex-direction Eigenschaft mit Werten von row-reverse oder column-reverse führt zu einer Diskrepanz zwischen der visuellen Darstellung des Inhalts und der DOM-Reihenfolge. Dies wirkt sich nachteilig auf Benutzer mit eingeschränktem Sehvermögen aus, die assistive Technologien wie Bildschirmleser verwenden. Wenn die visuelle (CSS) Reihenfolge wichtig ist, wird Benutzern von Bildschirmlesern der Zugang zur richtigen Lesereihenfolge verwehrt.

Formale Definition

Anfangswert	`row`
Anwendbar auf	flexible Container
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

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

Beispiele

Umkehrung 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

Siehe auch

CSS flex-flow Kurzschreibweise für die CSS flex-direction und flex-wrap Eigenschaften.
Grundkonzepte des Flexbox-Layouts
Anordnung von Flex-Elementen

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden