flex-direction
Quick Summary for flex-direction
flex-direction
CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
Code Usage for flex-direction
/* 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;
More Details for flex-direction
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.
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; }
ResultSpecifications
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 itemsLast modified: Sep 27, 2021, by MDN contributors
Select your preferred language English (US)EspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language