flex-direction - CSS

Try it

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> <div>Item One</div> <div>Item Two</div> <div>Item Three</div> </div> </section>

#example-element { border: 1px solid #c5c5c5; width: 80%; display: flex; } #example-element > div { background-color: rgb(0 0 255 / 0.2); border: 3px solid blue; width: 60px; margin: 10px; }

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

css

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

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

flex-direction = 
 row |
 row-reverse |
 column |
 column-reverse

Examples

Reversing flex container columns and rows

HTML

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

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

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Nov 7, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content