loading...
Cover image for CSS Flexbox Simulator

CSS Flexbox Simulator

juliansci profile image Julián Scialabba ・1 min read

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!

Discussion

pic
Editor guide
Collapse
proticm profile image
Milos Protic

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

Collapse
pankajpatel profile image
Pankaj Patel

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

Collapse
atulcodex profile image
Atul Prajapati

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

Collapse
juliansci profile image
Julián Scialabba Author

I'm glad to hear that!

Collapse
ahmadbassamemran profile image
Collapse
pankajpatel profile image
Pankaj Patel

Nice work! Thanks for creating and sharing!

Collapse
ahkeravi2778 profile image
Ravi

really nice to see this as a beginner

Collapse
thebrown profile image