flex-direction

Summary

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 value 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

See Using CSS flexible boxes for more properties and information.

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

Examples

element { 
  flex-direction: row-reverse;
}

Specifications

Browser compatibility

[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. Firefox supports multi-line flexbox since Firefox 28.

See also

• Using CSS flexible boxes
• Flexible-boxes-related properties: margin, align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order