Justify-content vs Align-items

Hi everyone!

Can someone please provide an explanation:

  1. What is the relationship between justify-content and align-items?
  2. What are their differences?
  3. How do each of them function?

Thank you in regards!

Align is Y axis, justify is X axis, sort of.

XY axis depending on the “orientation” of the flex. For flex-direction row, justify is horizontal (X) and align is vertical (Y). For flex-direction column they’re inverted, with justify being vertical and align horizontal.

It’s confusing, I still use the wrong one by mistake sometimes, there are tons of memes about confusing the two.

Edit: One extra thing, align works with align-self. Justify-self doesn’t work (probably does in some circumstances but idk which). So instead of justify-self: flex-end/start you do margin-left/right/top/bottom: auto. If you want to get it to the right side of the div, use margin-left: auto; aka the opposite side.

1 Like

Thanks for responding @Bob.i

Ok, correct me if I’m wrong. So justify-content works with the different orientations of the main axis (x axis) and align-items works with the different orientations of the cross axis (y axis)?

Yeah, an easier way to put it is Justify works with the direction nodes are added.

If notes are being added vertically, justify will affect it vertically. Same thing for horizontal

1 Like

Thank you so much! This helped to clarify some confusion!

@ShaniaKond, lots of people reference this a lot;
CSS-Tricks has amazing write-ups on Flexbox

And of course there’s one for Grid

1 Like