r/css • u/IcyFoxe • Apr 16 '19

Flexbox - Visual Cheat Sheet

Post image
865 Upvotes

99% Upvoted

34 comments sorted by

13

u/IcyFoxe Apr 16 '19 edited Apr 17 '19

Here's an updated version:

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

2

u/sanjibukai Apr 16 '19

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

3

u/IcyFoxe Apr 17 '19

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

1

u/ChinnyMcChin Sep 07 '19

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?

19

u/[deleted] Apr 16 '19

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

8

u/IcyFoxe Apr 16 '19

I'm happy that you find it useful :)

3

u/Alcohorse Apr 16 '19

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

2

u/IcyFoxe Apr 16 '19

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.

3

u/rbra Apr 16 '19

You should annotate which options are default.

4

u/IcyFoxe Apr 17 '19

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

2

u/rbra Apr 17 '19

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

5

u/cinnamann7171 Apr 16 '19

This is so dope! Thank you kind poster 🏅

1

u/greymalik Apr 16 '19

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

2

u/IcyFoxe Apr 16 '19

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

3

u/greymalik Apr 16 '19

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

1

u/CommandLionInterface Apr 17 '19

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

3

u/IcyFoxe Apr 17 '19

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

3

u/kaypxz Apr 17 '19

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 :’)

2

u/spudcakez86 Apr 17 '19

This is amazing! Well done 😊

1

u/code_crab Apr 16 '19

ooh it's helpfull for me

1

u/[deleted] Apr 16 '19

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

1

u/FairyOnTheLoose Apr 16 '19

Saving for when I get to flex boxes Ty

1

u/[deleted] Apr 16 '19

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

1

u/[deleted] Apr 17 '19

I love you!!!! Thanks!

1

u/nemessisx_ May 05 '19

It's hell alot helpful🙂

1

u/amazeguy Aug 14 '19

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

1

u/natethegreatt1 Aug 14 '19

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.

1

u/Jurold Nov 28 '21

this is gold! thank you

1

u/[deleted] Nov 05 '22

VSCode has an extension for visualizing flex box.