What is a flex-direction property used for and what values can it have?

The property flex-direction defines what will be the direction of the flow of the flex items within a flex container.

The direction can be either horizontal (default) or vertical.

To make the flex items flow horizontally within the flex container, use style flex-direction: row.

To make the flex items flow vertically within the flex container, use style flex-direction: column.

By default, the horizontal flow goes from left to right and the vertical flow from top to bottom. This can be changed.

To make the flex items flow horizontally within the flex container, but in reversed direction, use style flex-direction: row-reverse.

To make the flex items flow vertically within the flex container, but in reversed direction, use style flex-direction: column-reverse.

CSS

.container {
  display: flex;
  flex-direction: row;
}

.container2 {
  display: flex;
  flex-direction: row-reverse;
}

.container3 {
  display: flex;
  flex-direction: column;
}

.container4 {
  display: flex;
  flex-direction: column-reverse;
}