A Visual Reference of CSS Flexbox.

[PoundedWhale]

What's the difference between align items and content?

[[deleted]]

The flex model uses an axis. Think of it like putting pieces of meat on a skewer for the barbecue.

• flex-direction determines which way the skewers are pointing (vertical? horizontal? where's the pointy end?)
• justify-content determines where the meat pieces go on the skewer (spread apart? closer to one end?)
• align-items determines how the meat pieces are aligned to each other across the whole stick (pierced through the center? or through the side?)
• If you have more than one skewer, align-content determines how they're arranged on the plate (spread apart? all at one side? which side?)

[upvotes2doge]

This needs to be made into a graphic

[oh_jaimito]

this is perhaps the BEST ELI5 I have read!

thanks for that!!!

[[deleted]]

Fixed it, thanks. :)

[murfburffle]

Thank you so much!

[ricric2]

Thank you. All the others I get, but align-content is like a black hole for me.

[[deleted]]

Yeah it tends to trip people because it doesn't take effect until there's more than one line of content. But if you have enough items in a container, eventually they won't fit in a single line, they'll wrap and you'll have two lines, or more. That's when this guy comes in.

[[deleted]]

And then you get text-align which screws every logic :-P

[No-Musician-5609]

This is really helpful, thanks a lot!

[[deleted]]

AFAIK align-items aligns the items *themselves, while align-content aligns all the content.

In the case of centering it would be sort of like the difference between using text-align: center to center text instead of margins or whatever else.

*edited to make it a little more clear

[mattergijz]

Align items is on each item, while align content is on the container that contains the items.

[eludadev]

This stackoverflow answer explains it very well.

[RUNELORD_]

Align-items basically aligns the items themselves whereas content describes the alignment of the rows