DEV Community

Cover image for CSS Flexbox Cheat Sheet 🔥
Mariana Simon
Mariana Simon

Posted on • Originally published at learnpine.com

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 🙂

learnpine_flexbox_cheat_sheet

Top comments (31)

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