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
 
creativemacmac profile image
creativemacmac •

Cool thanks a mil 🙂🙂

Collapse
 
simonpaix profile image
Mariana Simon •

Glad you found it useful :)

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
 
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
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳 •

well explained, bookmarked :)

Collapse
 
simonpaix profile image
Mariana Simon •

Cool! Glad you liked it, Atul :)

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
 
billsimmonszy profile image
Korhall •

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

Collapse
 
simonpaix profile image
Mariana Simon •

glad you liked it :)

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
 
alin11 profile image
Ali Nazari •

Great! Can I share it on my Linkedin account?

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

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 ;)