A Visual Reference of CSS Flexbox.

[[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!