What is a cross axis in Flexbox?

In Flexbox, the cross axis is an axis that is perpendicular to the main axis.

The flex-direction: row defines the direction of the main axis to be horizontal. The cross axis will then be vertical.

The flex-direction: column defines the direction of the main axis to be vertical. The cross axis will then be horizontal.

The cross axis for the following CSS will be vertical:

div {
  display: flex;
  flex-direction: row;
}

The cross axis for the following CSS will be horizontal:

div {
  display: flex;
  flex-direction: column;
}