DEV Community

loading...
Cover image for CSS Flexbox Cheat Sheet 🔥

CSS Flexbox Cheat Sheet 🔥

Mariana Simon
On a mission to make online learning less boring. Coding live on LearnPine.com
Originally published at learnpine.com ・1 min read

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

Discussion (29)

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 Author

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

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 Author

Cool! Glad you liked it, Atul :)

Collapse
shimanshu83 profile image
Shimanshu83

Thank you do you have grid cheat sheet.

Collapse
simonpaix profile image
Mariana Simon Author

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 Author

Glad you found it useful :)

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 Author

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 Author

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

Collapse
kianashnad profile image
Kian Ashnad

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

Collapse
simonpaix profile image
Mariana Simon Author

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
vietnguyenfuji profile image
Viet Nguyen

Thank you. It helps me a lot

Collapse
simonpaix profile image
Mariana Simon Author

Glad it helped, Viet :D

Collapse
stevevail profile image
Steve-Vail

This is awesome! Thank you for sharing.

Collapse
simonpaix profile image
Mariana Simon Author

Nice to hear that, Steve :)

Collapse
billsimmonszy profile image
Korhall

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

Collapse
simonpaix profile image
Mariana Simon Author

glad you liked it :)

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 Author

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