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