HTML & CSS Interview Question #87

What are the main axis and cross axis in Flexbox?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

The main axis is the direction in which flex items are laid out. It is controlled primarily by flex-direction. The cross axis is perpendicular to the main axis.

Detailed Explanation

The main axis is the direction in which flex items are laid out. It is controlled primarily by flex-direction. The cross axis is perpendicular to the main axis.

With the default flex-direction: row in a left-to-right horizontal writing mode, the main axis is horizontal and the cross axis is vertical. Developers should think in terms of axes rather than assuming that justify-content always means horizontal alignment.

Code Example

.container {
    display: flex;
    flex-direction: row;

    /* Main-axis alignment */
    justify-content: space-between;

    /* Cross-axis alignment */
    align-items: center;
}