Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

Summary

The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Note that the value row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

Initial valuerow
Applies toflex containers
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.

Syntax

/* 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: unset;

Values

The following values are accepted:

row
The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction.
row-reverse
Behaves the same as row but the main-start and main-end points are permuted.
column
The flex container's main-axis is the same as the block-axis. The main-start and main-end points are the same as the before and after points of the writing-mode.
column-reverse
Behaves the same as column but the main-start and main-end are permuted.

Formal syntax

row | row-reverse | column | column-reverse

Example

HTML

<h4>This is a Column-Reverse</h4>
<div id="content">
    <div id="box" style="background-color:red;">A</div>
    <div id="box" style="background-color:lightblue;">B</div>
    <div id="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
    <div id="box1" style="background-color:red;">A</div>
    <div id="box1" style="background-color:lightblue;">B</div>
    <div id="box1" style="background-color:yellow;">C</div>
</div>

CSS

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

#box {
  width: 50px;
  height: 50px;
}

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row-reverse;
}

#box1 {
  width: 50px;
  height: 50px;
}

Result

Specifications

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-direction' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]
21.0-webkit (Yes)-webkit
(Yes)

10 -ms
11

12.10

7 -webkit

Feature Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support ? ? (Yes)-webkit
(Yes)
No support 12.10

No support

[1] To activate flexbox support for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true.

[2] Multi-line flexbox is supported since Firefox 28.

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

See also

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: erikadoyle,