What axes exist in Flexbox?

In Flexbox, there are two main axes:

• Main axis: Defined by the flex-direction property. It determines the direction in which flex items are laid out in the container. By default, this is row (left to right).
• Cross axis: Always perpendicular to the main axis. It determines the direction perpendicular to the layout of flex items.

The main axis direction can be set with four values:

• row (default): items are laid out from left to right.
• row-reverse: items are laid out from right to left.
• column: items are laid out from top to bottom.
• column-reverse: items are laid out from bottom to top.

Example:

.flex-container {
  display: flex;
  flex-direction: row; /* Main axis - horizontal */
}

.another-flex-container {
  display: flex;
  flex-direction: column; /* Main axis - vertical */
}