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

github logo ・1 min read

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

twitter logo DISCUSS (6)
markdown guide

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


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


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


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

Classic DEV Post from Jun 14

FreeCodeCamp violated the rights of Medium authors

Milos Protic profile image
I'm a passionate tech guy