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 💯

Top comments (15)

Collapse
 
tlanettepollard profile image
T. Lanette

Great visual cheat sheet!

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
 
oggo profile image
oggo

Nice cheat sheet :-D

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
 
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
 
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
 
olsard profile image
olsard

Nice brief cheat sheet. Thanks

Collapse
 
marciodeveloper profile image
Jose Marcio Barthem

Great illustration!

Collapse
 
dome68 profile image
Domenico

Really helpfull, every single part of 12. Thanks.