“CSS Flexbox Cheatsheet” v3

I’m really happy to share a new version of my “CSS Flexbox Cheatsheet” VS Code extension! 🎉

The biggest change in this update is the addition of interactive demos to most properties. You will be able to see how each value works just by clicking on the buttons. I’ve wanted to add this for some time and pushing an initial iteration of it feels great.

Here’s how it works:

Now I’m looking forward to your feedback! Tell me what you like about it and what you would like to see more. I’ll make sure to add it in a future update 🙂

Go grab it while it’s hot 🔥

Comments

[WORMSS]

So it's a bit like the-echoplex.net/flexyboxes/ ?
This has been my go-to tester for years.. I will give yours next time I need to do flexy stuff.

[Dzhavat Ushev]

Nice website. Didn't know about it. Yeah, they look similar. In my extension the interactive examples are related to only one set of properties instead of combining everything together. I see both resources as valuable. Thanks if you decide to give mine a try :)

[Ben Rombaut]

+1 for this website, I use it all the time

[mshajid]

Thanks bruh.

[Antonio Sevillano]

Wow, great stuff, thank you!

[Mike Homol]

Dude this is awesome! Thanks for making this!

[Dzhavat Ushev]

Thanks for the positive words. Hope you find it beneficial :)

[KNTH]

Good stuff!!

[Nuno Pereira]

Really nice ! Thx for sharing !

[Fahad Khan]

Good feature in VS but I use sublime. I hope sublime will adopt this feature soon.

[Dzhavat Ushev]

Thanks for sharing your comment. I'm sorry that I cannot provide the same functionality to Sublime as well. If you or someone else want to port my extension to other editors, the code is freely available on GitHub.

[Armen]

Awesome. Thanks a lot :)

[TvO]

Cool stuff, really useful!

[Jon Lopez de Guereña]

Really useful, thanks !