DEV Community

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

The Only CSS Flexbox Illustration You Will Ever Need

Arafat on May 11, 2023

I created this CSS flexbox visual representation🤯 Do Like ❤️ & Share your feedback 🙌 Visit: 👨‍💻My Portfolio 🏞️My Fiverr 🌉My Github 🧙‍♂️My L...
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
 
tlanettepollard profile image
T. Lanette •

Great visual cheat sheet!

Collapse
 
olsard profile image
olsard •

Nice brief cheat sheet. 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
 
bentleyjensen profile image
Bentley Jensen •

LOVE this. NEED this.

Though there's two centers in align-content. I assume it's supposed to be stretch?

Collapse
 
arafat4693 profile image
Arafat •

Thanks for letting me know. Now It's fixed😊

Collapse
 
oggo profile image
oggo •

Nice cheat sheet :-D

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
 
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
 
marciodeveloper profile image
Jose Marcio Barthem •

Great illustration!

Collapse
 
madzimai profile image
Netsai •

That's great! 🙌

Collapse
 
dome68 profile image
Domenico •

Really helpfull, every single part of 12. Thanks.

Collapse
 
rainslide profile image
Crystal RainSlide •