CSS flex-direction
property specifies the direction in which the flex items should be placed inside their flex container.
By default, the flex items are placed in the row direction i.e. horizontally left to right. See the example below:
Example:
.flex-container{ display: flex; flex-direction: row; }
If we want the flex items to be displayed from right to left, we have to use flex-direction: row-reverse;
. See the example below:
Example:
.flex-container{ display: flex; flex-direction: row-reverse; }
If we set the flex-direction: column;
, the flex items are displayed from top to bottom along the cross axis. See the example below:
Example:
.flex-container{ display: flex; flex-direction: column; }
If we set the flex-direction: column-reverse;
, the flex items are displayed from bottom to top along the cross axis. See the example below:
Example:
.flex-container{ display: flex; flex-direction: column-reverse; }
CSS Syntax
The flex-direction
property has the following syntax:
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
Property Values
The flex-direction
property accepts the following values:
row | The flex items are displayed horizontally left to right. This is the default value. |
row-reverse | The flex items are displayed horizontally right to left. |
column | The flex items are displayed vertically top to bottom. |
column-reverse | The flex items are displayed vertically bottom to top. |
initial | Sets the flex-direction property to its default value(row). |
inherit | Inherits the flex-direction property from the parent element. |
General Info
Default Value | row |
Inherited | No |
JavaScript Usage | element.style.flexDirection = “column” |