The flex-direction property, main axis

Do you remember how a document normally flows? Blocks and text are arranged from left to right and from top to bottom.

Under the traditional block model, the directions “left”, “right”, “top”, and “bottom” cannot be changed. But within a flex container you can modify these concepts, since you can change the typical direction of the flow.

The flexbox uses the concept of the “main axis” instead of the simple directions “left” and “right”. The flex items flow along the main axis from the start to the end of it.

By default, the main axis flows from left to right, but it can be rotated in all directions using the flex-direction property, which is assigned for the flex container. The property values are:

• row – The default value, whereby the main axis flows from left to right.

• column — The main axis flows from top to bottom.

• row-reverse — The main axis flows from right to left.

• column-reverse — The main axis flows from bottom to top.

Flex items are always arranged along the main axis, regardless of the direction of flow.