DEV Community

Milos Protic
Milos Protic

Posted on

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

Top comments (6)

Collapse
 
elenakout profile image
elenakout

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

Collapse
 
proticm profile image
Milos Protic

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

Collapse
 
j3ffjessie profile image
J3ffJessie

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

Collapse
 
proticm profile image
Milos Protic

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

Collapse
 
umutcnkus profile image
Umutcan Kuş

That's AWESOME! Thanks.

Collapse
 
proticm profile image
Milos Protic

No problem, glad you find it useful.