152

I'm having a really hard time understanding what's the difference? From my research it seems like justify-content can do... space-between and space-around, while align-items can do... stretch, baseline, initial and inherit?

Also looks like both properties share, flex-start, flex-end and center.

Is there and dis/advantages to using one over the other or is it just preference? I feel like they are way to similar to just do the same thing anyone know the difference? thanks!!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Ben Casalino
  • 2,262
  • 5
  • 20
  • 28

1 Answers1

323

Both set the alignment of the content.

1. justify-content: along primary axis

(set horizontal alignment/spacing if flex-direction is row or vertical alignment/spacing if flex-direction is column)

For instance, if flex-direction is row (default):

flex-start; Align children horizontally left

flex-end; Align children horizontally right

center; Align children horizontally centered (amaze!)

space-between; Distribute children horizontally evenly across entire width

space-around; Distribute children horizontally evenly across entire width (but with space on the edges

2. align-items: along secondary axis

(set vertical alignment if flex-direction is row or horizontal alignment if flex-direction is column)

For instance, if flex-direction is row (default):

flex-start; Align children vertically top

flex-end; Align children vertically bottom

center; Align children vertically centered (amaze!)

baseline; Aligned children vertically so their baselines align (doesn't really work)

stretch; Force children to be height of container (great for columns)

See it in action:

http://codepen.io/enxaneta/full/adLPwv/

In my opinion:

These should have been named:

flex-x: alignment/spacing in primary axis

flex-y: alignment in secondary axis

But with HTML you can never have nice things. Never.

Robot
  • 3,811
  • 1
  • 13
  • 14
  • 2
    The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively). – artamonovdev Apr 18 '17 at 18:23
  • 2
    I think I mentioned this in the note at the top of my answer – Robot Apr 18 '17 at 20:00
  • 1
    Yes, you're right. I didn't notice. – artamonovdev Apr 19 '17 at 13:31
  • 11
    why couldn't they just call it vertical and horizontal alignment haha – Daniel Kobe Jun 21 '17 at 03:38
  • 29
    Unfortunately for simplification, the effect of `justify-content` and `align-items` changes depending on the `flex-direction`. E.g. if `flex-direction` is set to `column`, `justify-content` affects vertical alignment, and vice versa. – ericso Jun 21 '17 at 18:35
  • 64
    @ericso That is a copout, DanielKobe is correct: they could have easily named it flex-x, flex-y, or even flex-primary, flex-secondary in a way that indicates the axis can change. The current names are ridiculous, inconsistent, and confusing to those learning. They give no indication that they are related to eachother, or to flexbox. Words like justify and align are already polluted by other css rules like vertical-align etc. Words like content and items are mismatched. I just cant even anymore. – Robot Jun 21 '17 at 18:47
  • 1
    @FEA5T not saying it's not a copout, just saying that it's possible that's the reasoning behind the avoidance of using flex-x, flex-y, etc. I mostly agree with the sentiment that it should be flex-x, flex-y. – ericso Jun 21 '17 at 20:08
  • 7
    This definition is incorrect. It isn't about horizontal and vertical. It's about main axis and cross axis. justify-content acts on the main axis and align-items acts on the cross axis. If the flex-direction is horizontal then this answer is correct. If the flex-direction is vertical then it isn't. – Undistraction Sep 05 '17 at 08:20
  • 3
    @pedr See my note up top? This explanation makes a poor naming convention approachable, while making many notes of the primary and secondary axis you mentioned. – Robot Sep 05 '17 at 20:42
  • I know I'm not supposed to give my own opionion... but.. – Ari Seyhun Feb 04 '19 at 23:42
  • Totally agreed on the naming suggestion, some parts of the html world are messy..., only makes the life for beginners miserable .... – avocado Apr 11 '20 at 07:22
  • Guys you can also use CSS property `place-items` as a shorthand for `justify-content` and `align-items` – Ankur Pohekar Jul 10 '21 at 10:40
  • @Acidic9 Place-items is short for justify-items not justify-content. Justify-items is for css grid not flexbox. – Robot Jul 19 '21 at 21:24
  • 1
    Yep, the names could not have been worse. I'm a little ashamed to say that, but I have been using flexbox for years and did not know you can center along the secondary axis or that align-items is a flex property. I used to create wrapper elements with flex direction in the other axis to center vertically in a row. Luckily I have found this answer, better late than never. Thank you! – Maciej Krawczyk Aug 26 '21 at 08:59
  • @Robot I think the terminology comes from typography. Justification is more about the space between elements whereas alignment describes the positioning to a line. This image was helpful in understanding: https://www.shutterstock.com/blog/wp-content/uploads/sites/5/2018/07/shutterstock-align-typography-example-copy2.jpg – docta_faustus Dec 01 '21 at 05:41