DEV Community

Cover image for CSS Flexbox Cheat Sheet 🔥

CSS Flexbox Cheat Sheet 🔥

Mariana Simon on June 09, 2021

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 amazin...
Collapse
 
bhaskarnair2 profile image
Bhaskar Nair

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

Collapse
 
simonpaix profile image
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...

Collapse
 
connect2satyam profile image
SATYANARAYANA DEVI

Not found

Thread Thread
 
kylejschwartz profile image
Kyle Schwartz

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

Collapse
 
stokry profile image
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

Collapse
 
vietnguyenfuji profile image
Viet Nguyen

That's cool. Thank for sharing

Collapse
 
simonpaix profile image
Mariana Simon

Glad you liked it :)

Collapse
 
nepalilab profile image
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.

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

well explained, bookmarked :)

Collapse
 
simonpaix profile image
Mariana Simon

Cool! Glad you liked it, Atul :)

Collapse
 
fikrimouaad profile image
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?

Collapse
 
simonpaix profile image
Mariana Simon

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

Collapse
 
therealmecoy profile image
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...

Thread Thread
 
simonpaix profile image
Mariana Simon

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

Collapse
 
shimanshu83 profile image
Shimanshu83

Thank you do you have grid cheat sheet.

Collapse
 
simonpaix profile image
Mariana Simon

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

Collapse
 
creativemacmac profile image
creativemacmac

Cool thanks a mil 🙂🙂

Collapse
 
simonpaix profile image
Mariana Simon

Glad you found it useful :)

Collapse
 
billsimmonszy profile image
Korhall

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

Collapse
 
simonpaix profile image
Mariana Simon

glad you liked it :)

Collapse
 
vietnguyenfuji profile image
Viet Nguyen

Thank you. It helps me a lot

Collapse
 
simonpaix profile image
Mariana Simon

Glad it helped, Viet :D

Collapse
 
stevevail profile image
Steve-Vail

This is awesome! Thank you for sharing.

Collapse
 
simonpaix profile image
Mariana Simon

Nice to hear that, Steve :)

Collapse
 
kianashnad profile image
Kian Ashnad

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

Collapse
 
simonpaix profile image
Mariana Simon

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

Collapse
 
kianashnad profile image
Kian Ashnad

Again, thank you :)

Collapse
 
alin11 profile image
Ali Nazari

Great! Can I share it on my Linkedin account?

Collapse
 
tcsolutions profile image
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.

Collapse
 
simonpaix profile image
Mariana Simon

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

Collapse
 
arvindpdmn profile image
Arvind Padmanabhan

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