CSS Flexbox Cheat Sheet 🔥

Hi dev friends!

I made this cheat sheet to help my students. I shared it on Twitter here and it got viral so I thought it could help this amazing community here too :)

Let me know what you think 🙂

Comments

[Bhaskar Nair]

Could you share a higher quality version? I would like to print and paste it on my wall.

[Mariana Simon]

Hi, Bhaskar! Sure, I hosted a higher quality version here, you need to right click and download the image learnpine.com/blog/a-flexbox-css-c...

[SATYANARAYANA DEVI]

Not found

[Kyle Schwartz]

It's on the wayback machine: web.archive.org/web/20210618022808...

[Stokry]

I built a Mozilla Firefox extension for testing CSS flexbox rules.
This extension is easy to use, you can make grids, columns, experiment with all flexbox properties. Here it is - link

[Viet Nguyen]

That's cool. Thank for sharing

[Mariana Simon]

Glad you liked it :)

[Nepali Lab]

I think it would be immensely helpful if you wrote a post about how you created it and how one can get into creating extensions for Mozilla.

[🚩 Atul Prajapati 🇮🇳]

well explained, bookmarked :)

[Mariana Simon]

Cool! Glad you liked it, Atul :)

[FIKRI Mouaad]

Thank you . I took it yesterday from your tweet and set it as a wallpaper . Helps memories them unconsciously like that.
Is there one like this but Grid instead?

[Mariana Simon]

Nice! Many people asked about a grid, so it will probably be the next one :)

[realMecoy🖥🖲]

Thanks for this, before I found this, I had taken a whole bunch of screenshots from a long page and made a folder for them on my phone. This is much better because it's all in one place. Looking forward to a grid sheet like this...

[Mariana Simon]

Thank you! Grid will probably be the next one ;)

[Shimanshu83]

Thank you do you have grid cheat sheet.

[Mariana Simon]

Glad you liked it Shimanshu! Yes, grid is coming next :)

[creativemacmac]

Cool thanks a mil 🙂🙂

[Mariana Simon]

Glad you found it useful :)

[Korhall]

Thanks!!!!!!!!!!!!!!!!!!!!!

[Mariana Simon]

glad you liked it :)

[Viet Nguyen]

Thank you. It helps me a lot

[Mariana Simon]

Glad it helped, Viet :D

[Steve-Vail]

This is awesome! Thank you for sharing.

[Mariana Simon]

Nice to hear that, Steve :)

[Kian Ashnad]

Excellent job! I'll try to put it on the wall.

[Mariana Simon]

Cool! If you want to print it I hosted a better quality version here. ;) learnpine.com/blog/a-flexbox-css-c...

[Kian Ashnad]

Again, thank you :)

[Ali Nazari]

Great! Can I share it on my Linkedin account?

[TC-solutions]

This is excellent. I have had great trouble with flexbox. A CSS Grid cheat sheet would be helpful as well. Thank you for sharing this. It is much appreciated.

[Mariana Simon]

Glad to hear that! Grid will probably be the next one ;)

[Arvind Padmanabhan]

Good and useful. Those who're completely new to Flexbox, read this before using the cheat sheet: devopedia.org/css-flexbox