CSS flex-direction Property

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:

rowThe flex items are displayed horizontally left to right. This is the default value.
row-reverseThe flex items are displayed horizontally right to left.
columnThe flex items are displayed vertically top to bottom.
column-reverseThe flex items are displayed vertically bottom to top.
initialSets the flex-direction property to its default value(row).
inheritInherits the flex-direction property from the parent element.

General Info

Default Valuerow
InheritedNo
JavaScript Usageelement.style.flexDirection = “column”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment