Flexbox FAQ: justify- vs align-

One of the really exciting things Flexbox has brought into my life has to do with alignments.

Getting stuff aligned properly on both axes has been a notorius head scratcher for pretty much my entire career. But once Flexbox made its web scene debut, alignments became a straightforward, two-lines-of-CSS formality.

justify-content: center;
align-items: center;

Not bad! Except… What does that actually mean? When does one use justify- and when align-?

The thing to remember is that when it comes to Flexbox, it’s all about the main axis and cross axis.

Flexbox’s main axis is specified via flex-direction.

In terms of alignment, justify- performs main axis alignment, i.e. alignment in the same direction as your flex-direction.

While align- performs cross-axis alignment, i.e. alignment across the direction defined by flex-direction.