Introducing the Flexbox builder tool! Build a Layout and Learn at the Same Time

Introducing a simple Flexbox builder tool, built with Vue!

• Build your layout with a couple of simple clicks
• Real-time output changes
• Changeable HTML output (div, section, ul)
• Copy & Paste the HTML/CSS for further styling
• Setup the flexbox container and each item independently
• Share the CSS between the flexbox items
• Learn as you play with it by visualizing the changes

Check it out here: Flexbox Builder Tool

Comments

[J3ffJessie]

This is awesome. Great tool to help newbies like me learn how this works without sitting through videos and chapter after chapter.

[Milos Protic]

Thanks mate! Glad I could help you out and make it more clear.

[elenakout]

Really cool! 5min with this and I tested and understand more flexbox properties than half an hour testing in codepen!

[Milos Protic]

Thanks! That was the goal. I wanted to make it as understandable as possible. I'm glad I managed to achieve that.

[Umutcan Kuş]

That's AWESOME! Thanks.

[Milos Protic]

No problem, glad you find it useful.