Main and Cross Axes in Flexbox
In Flexbox, layout is based on two axes: the main axis and the cross axis. Understanding these axes is essential for aligning and distributing flex items correctly.
The main axis is the primary axis along which flex items are laid out. By default, it runs horizontally (row direction).
The cross axis is perpendicular to the main axis. By default, it runs vertically.
Properties like
justify-contentcontrol alignment along the main axis.Properties like
align-itemsandalign-selfcontrol alignment along the cross axis.The direction of the main axis can be changed using
flex-direction(row, row-reverse, column, column-reverse). The cross axis adjusts automatically.
In this example, the .container flex items are distributed along the main axis (horizontal) using justify-content and centered along the cross axis (vertical) using align-items.
Always identify the main and cross axes before applying alignment properties.
Use
flex-directionto change the layout direction and understand how it affects axes.Combine
justify-contentandalign-itemsfor precise positioning.Test layouts on different screen sizes to ensure alignment behaves as expected.