Flexbox Axes

2D graphics are generally pretty straightforward. Think of the screen like a graph: horizontal transformations relate to the X-axis, and vertical transformations relate to the Y-axis. It can be a bit confusing then when properties we use to position content horizontally and vertically, aren’t always vertical or horizontal.

Why is justify-content moving my content vertically?

Flexbox and grid are intended for fluid layout and therefore have to allow content to flow across rows (the horizontal x-axis) AND columns (the vertical y axis). Rather than relating transformations to a static grid that we can’t predict, like the user’s screen, each flex parent container instead has its own main axis and cross axis. Properties like justify-contentoperate along the main axiswhile properties like align-items operate along the cross axis.

So which one is horizontal?

Let’s take a page from 3D applications. If you’ve used something like Blender or Houdini or done rigging or done 2D animation, you might be familiar with world coordinates and local coordinates. Every flex box element has its own local coordinate system based on its flex-direction value.