In this section, we will learn what the flex-direction property is and how to use it in CSS.

Click here to run the example of flex-direction property.

CSS flex-direction Property Definition and Usage

Another important property in Flexbox is `flex-direction` by which we can shift the direction of Main and Cross axes of a flexbox.

CSS flex-direction Property Syntax

This is the syntax of flex-direction property:

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

CSS flex-direction Property Value

The `flex-direction` property is applied to Flex-container and here are the values that can be set for this property:

• row: This is the default value and if used, it makes the flex-items to sit next to each other from Left to Right.
• row-reverse: this is the opposite of “row” and if applied, it makes the flex-items to sit next to each other, but from Right to Left.
• column: Using this value, it makes the flex-items to sit from top side of the container towards the bottom of that container.
• column-reverse: This is the opposite of “column” and if applied, it makes the flex-items to sit from bottom side of the container towards the top of that container.

Warning: do not heavily use `column-reverse or order-reverse` values because it can harm the accessibility of your site because navigation using the Tab-key still uses the source order in most browsers and so this can confuse the audience if they use Tab key. Also, most screen-reader apps for visually impaired people use the source order to read contents.

Example: flex-direction property in CSS

See the Pen flex-direction property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.