Explain the main axis and cross axis in Flexbox. Which properties align along each?

A flex container lays items out along the main axis. The cross axis is perpendicular to it, at a right angle.

flex-direction sets the main axis:

• With row, the default, it runs in the inline direction: left to right in English.
• With column, it runs from top to bottom.

These properties align the items:

• justify-content spreads items along the main axis (flex-start, center, space-between and others).
• align-items aligns items on the cross axis, inside their line.
• align-self overrides align-items for one item.
• align-content spreads the lines themselves, when items wrap onto several lines.

So switching to flex-direction: column swaps what justify-content and align-items seem to do. For example, with column, justify-content: center centres items vertically. This is a common source of confusion. gap sets the spacing between items on both axes.