flex-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

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: rgba(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

/* 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

<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

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`flex-direction`	2921	1212	20 Since Firefox 28, multi-line flexbox is supported. 49	12.115	97	2925	20 Since Firefox for Android 28, multi-line flexbox is supported. 49	12.114	97	2.01.5	4.44.4
`column`	21	12	≤72	15	7	25	≤79	14	7	1.5	4.4
`column-reverse`	21	12	81 ≤72–81 Before Firefox 81, overflow with `column-reverse` was unsupported. See bug 1042151.	15	7	25	81 ≤79–81 Before Firefox for Android 81, overflow with `column-reverse` was unsupported. See bug 1042151.	14	7	1.5	4.4
`row`	21	12	≤72	15	7	25	≤79	14	7	1.5	4.4
`row-reverse`	21	12	81 ≤72–81 Before Firefox 81, overflow with `column-reverse` was unsupported. See bug 1042151.	15	7	25	81 ≤79–81 Before Firefox for Android 81, overflow with `column-reverse` was unsupported. See bug 1042151.	14	7	1.5	4.4