What are the main axis and cross axis in Flexbox?

The main axis is the direction your flex items flow along; the cross axis runs perpendicular to it.

flex-direction sets the main axis, and the cross axis is automatically the one at 90 degrees to it. So they swap depending on direction:

For flex-direction: row:

• Main axis: horizontal (left → right)
• Cross axis: vertical (top → bottom)

For flex-direction: column:

• Main axis: vertical (top → bottom)
• Cross axis: horizontal (left → right)

Why you have to internalize this: the alignment properties are defined in terms of these axes, not "horizontal" and "vertical." justify-content always aligns along the main axis, while align-items / align-content align along the cross axis. If you flip to column, those properties suddenly act on the opposite screen direction — which trips up almost everyone the first time.

Go deeper:

• MDN — Basic concepts of flexbox — diagrams of the main and cross axes and how they swap with flex-direction.