flex-direction property CSS Reference



Definition and Usage

The CSS flex-direction 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 row
  • Applies to flex containers
  • Inherited no
  • Media visual
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: row | row-reverse | column | column-reverse
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
flex-direction: inherit

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 he 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.

Examples

element { 
flex-direction: row-reverse;
}

Compatibility

Desktop browsers

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0) (behind a pref)
20.0 (20.0)
21.0-webkit Not supported 12.10 Not supported

Mobile browsers

Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support NA NA Not supported 12.10 Not supported

Relative articles