For those of you who have always had difficulty organizing your content with CSS, this tool is for you!

The not-so-new flexbox layout supported by all modern browsers is quite the step up from the old days of tables or float + margin. Although it is powerful and flexible, it has a bit of a learning curve.

This tool gives you the ability to visually create a flexbox layout and learn some of the common rules relating to flexbox.

Check out the tool

There are a few built-in example layouts to use, or you can start from scratch.

You can configure the container and item properties separately and learn what each property is for by focusing on it.

When your layout is finished, you can copy the generated source code to your own project code and fine tune as you like.