DEV Community

Cover image for The Only CSS Flexbox Illustration You Will Ever Need
Arafat
Arafat

Posted on

The Only CSS Flexbox Illustration You Will Ever Need

I created this CSS flexbox visual representation🤯

css flexbox

Do Like ❤️ & Share your feedback 🙌

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

Thanks for your support 💯

Latest comments (15)

Collapse
 
rainslide profile image
Crystal RainSlide
Collapse
 
tracygjg profile image
Tracy Gilmore

Hi Arafat, I really like your crib sheet. Any chance you can do one on CSS grid now?
Regards, Tracy

Collapse
 
madzimai profile image
Netsai

That's great! 🙌

Collapse
 
stokry profile image
Stokry

There is also a nice extension called Flexo. This extension is easy to use, allowing you to create grids and columns while experimenting with all flexbox properties. Flexo will generate CSS code that you can seamlessly incorporate into your project.

Collapse
 
marciodeveloper profile image
Jose Marcio Barthem

Great illustration!

Collapse
 
kadario profile image
Alexander

Really nice cheat sheet! Thanks

Collapse
 
larymak profile image
Hillary Nyakundi

Thrilled to hear that you found the cheat sheet helpful. Keep up the great work and happy learning!

Collapse
 
tlanettepollard profile image
T. Lanette

Great visual cheat sheet!

Collapse
 
dome68 profile image
Domenico

Really helpfull, every single part of 12. Thanks.

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

The flex-direction row would be clearer if you made the length of the boxes in the main axis all different so they didn't look so much like grids.

Collapse
 
olsard profile image
olsard

Nice brief cheat sheet. Thanks