CSS Flexbox Simulator

This post is not about the main concepts of CSS Flexbox. There are a lot of excelent posts that do it, for example: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I want to share a Flexbox Simulator that I've done.
It is very simple and you can understand quickly how to build your CSS Flexbox Container according to your needs.

The main idea is to modify the flexbox-container inputs and see how the flexbox-items react.

https://juliansci.github.io/css-flexbox-simulator/

Hope you enjoy it!

Comments

[Milos Protic]

Nice one. I did something similar some time back :) Here is my version Flexbox Workshoop

[Pankaj Patel]

This looks cool too :D
specially the +/- icons on the corner.

[Saleumsack]

Nice!

[🚩 Atul Prajapati 🇮🇳]

Thanks for the post I already looking for something like this one 🖋️🙏

[Julián Scialabba]

I'm glad to hear that!

[Ahmad Emran]

nice

[Ravi]

really nice to see this as a beginner

[Pankaj Patel]

Nice work! Thanks for creating and sharing!