flex-direction#

#Introduction

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction.

#Examples

css-apisrc/flex-direction/App.tsx

Preview

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;

#Values

• row

  Default value. 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 vertical. 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.

#Formal definition

#Formal syntax

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

#Compatibility