To use Flexbox effectively for layout, you first need to understand its two fundamental axes: the main axis and the cross axis. In Flexbox, the main axis is the direction in which flex items are laid out by default. This direction is controlled by the flex-direction property. The cross axis is always perpendicular to the main axis. If you think of the main axis as a road, the cross axis would be the street that crosses it. The way your items are arranged—either in a row (horizontally) or a column (vertically)—depends on which axis is set as the main axis.

In the example above, the container uses display: flex with flex-direction: row. This means the main axis runs horizontally, from left to right. The flex items (A, B, C) are arranged in a row along this axis. The cross axis is vertical, running from top to bottom.

If you change the flex-direction to column, the axes swap: the main axis becomes vertical and the cross axis becomes horizontal. This simple switch completely changes the flow of your layout.