Flexbox Axes

Flexbox Axes

Flexbox operates in a 2 axes system: a main and a cross axis. The main axis is your defining direction of how your flex items are placed in the flex container. Determining the cross axis is very simple, it's in the direction that's perpendicular to your main axis.

Remember in math class, we were taught x and y axis. Well, throw that out. Because the main axis can be horizontal or vertical. The x axis is not always the main axis.

A flexbox container has two axes:

• main axis

• cross axis

The main axis is determined by the value of the flex-direction property. The main axis can go in these directions:

• left to right

  flex-direction: row

• right to left

  flex-direction: row-reverse

• top to bottom

  flex-direction: column

• bottom to top

  flex-direction: column-reverse

The cross axis on the other side will be always perpendicular to the main axis. Take a look at the image below. This shows how the main axis is determined according to the different values of the flex-direction property.