How to change the direction of the flexbox container's axis?

Using the CSS property flex-direction.

/* Sets the main axis from left to right */
.container {
  display: flex;
  flex-direction: row; 
}

/* Sets the main axis from right to left */
.container {
  display: flex;
  flex-direction: row-reverse;
}

/* Sets the main axis from top to bottom */
.container {
  display: flex;
  flex-direction: column;
}

/* Sets the main axis from bottom to top */
.container {
  display: flex;
  flex-direction: column-reverse;
}

Value	Description
row	Main axis from left to right (default)
row-reverse	Main axis from right to left
column	Main axis from top to bottom
column-reverse	Main axis from bottom to top