Justify-content vs Align-items

HTML-CSS
1

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!

2

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
3

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)?

4

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
5

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

6

@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
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.