Main Axis and Cross Axis

Flex Box Layout applies a one-dimensional model while Grid Layout applies a two-dimensional model. In the one-dimensional model, you need to define in which direction you are building the design – the main axis. As the flexbox-related properties work depending on the main axis direction, it is important to understand which direction the main axis of the flexbox you are handling runs in.

Main Axis

The flex-direction property defines which direction the main axis runs in.

• When you set row or row-reverse in the flex-direction, the horizontal axis becomes the main axis.
• When you set column or column-reverse in the flex-direction, the vertical axis becomes the main axis.

Cross Axis

The axis that runs perpendicular to the main axis is called the cross axis in Flex Box.

• When you set row or row-reverse in the flex-direction, the vertical axis becomes the cross axis.
• When you set column or column-reverse in the flex-direction, the horizontal axis becomes the cross axis.

Start and End

Some flex box properties use the keywords start and end. The meanings of start and end depend on the main axis.

• When the horizontal axis is the main axis, start means the left edge while end means the right edge.
• When the vertical axis is the main axis, start means the top edge while end means the bottom edge.