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

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

flex-direction

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

Note that the values 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.

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: revert; 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 opposite to the content direction.

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 opposite to the content direction.

Accessibility concerns

Using the flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (CSS) order is important, then screen reader users will not have access to the correct reading order.

Flexbox & the keyboard navigation disconnect — Tink Source Order Matters | Adrian Roselli MDN Understanding WCAG, Guideline 1.3 explanations Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0

Formal definition

Initial value	row
Applies to	flex containers
Inherited	no
Computed value	as specified
Animation type	discrete

Formal syntax

row | row-reverse | column | column-reverse

Examples

Reversing flex container columns and rows

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

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

Result

Specifications

Specification
CSS Flexible Box Layout Module Level 1 # flex-direction-property

See also

CSS Flexbox Guide: Basic Concepts of Flexbox CSS Flexbox Guide: Ordering flex items

Last modified: Sep 27, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language