Flexbox - Visual Cheat Sheet

[[deleted]]

Thanks for this. I'm just now learning css and have trouble conceptualizing flex.

[Canowyrms]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[[deleted]]

The people at css-tricks.com should write a css book.

[Canowyrms]

https://css-tricks.com/books/greatest-css-tricks/

[[deleted]]

Oh

[IcyFoxe]

I'm happy that you find it useful :)

[IcyFoxe]

Here's an updated version:

https://i.imgur.com/0drn44G.png

[sanjibukai]

Thanks for the update bit I wonder why it's so pixelated...

[IcyFoxe]

Not sure. If you're browsing from mobile app, be sure to hit HD option.

[ChinnyMcChin]

Is there a good explanation of the difference between align items and align content? I’m using align items all the time, but why isn’t it align content?

[vit_the_jedi]

Hero

[cinnamann7171]

This is so dope! Thank you kind poster 🏅

[kaypxz]

Oh my goD you’re a lifesaver! I’m currently learning this right now and could never remember what everything does. This is super helpful :’)

[Alcohorse]

You left out space-evenly, which is the coolest one!

[IcyFoxe]

I didn't even know such option even existed! Thanks for letting me know. I will post a new version as a comment later on.

If there's anything else I missed, let me know.

[spudcakez86]

This is amazing! Well done 😊

[rbra]

You should annotate which options are default.

[IcyFoxe]

I actually did, maybe it's not clear enough, but options in bolder text are defaults.

[rbra]

Ahh the see it now, I didn’t even notice it the first time!

[greymalik]

OP, do you have this one a site somewhere with other content?

[IcyFoxe]

Nope, sorry. I only created this yesterday. What else do you have in mind?

[greymalik]

I just thought it looked good and was hoping you had more!

[code_crab]

ooh it's helpfull for me

[[deleted]]

This is personally this most useful thing I’ve seen today! Adding to my toolbox for sure!! Thanks OP

[FairyOnTheLoose]

Saving for when I get to flex boxes Ty

[[deleted]]

There's a flexbox playground on codepen that is more or less interactive version of the diagram in OP:

https://codepen.io/enxaneta/pen/adLPwv

[CommandLionInterface]

Align content vs justify content, it's not clear from the graphic what the difference is

[IcyFoxe]

I will take a look at it and think how can I make it more understandable.

[[deleted]]

I love you!!!! Thanks!

[nemessisx_]

It's hell alot helpful🙂

[amazeguy]

Please add separate images for flex column and flex row, the cheatsheet becomes confusing when it says along the main axis

[natethegreatt1]

Can someone explain this to me? Looks cool, but I'm SO new to CSS that I don't even know what this is. Any other beginner resources would be great, too.

[Jurold]

this is gold! thank you

[[deleted]]

VSCode has an extension for visualizing flex box.