How To Create an Interactive Flex Layout Designer In JavaScript

You can Follow me on Twitter to get tutorials, JavaScript tips, etc.

Best tutorials come from finishing real projects. When the project is done, I like sharing what I learned.

This time, the project is my css flex layout designer. I will explain how I created it from start to finish and provide example source code below.

This is the instance of flex class we’re going to code in this tutorial.

That’s what we’re building in this tutorial. You can also spawn multiple instances of it at will on the same page with different default parameters.

Here is the Open Flex Layout Designer < click to try it live again:

Open Flex Layout Designer

I think it’s a fun project because the built-in css flex functionality cuts out most of the work for us. The most difficult thing here is writing the “drag and drop” code, but still it’s not that hard.

To create this flex layout designer we will briefly use jQuery for cross-browser click events and jQuery.css method to dynamically set CSS properties to our flex items while they are being resized.

FIRST THINGS FIRST. Why are you creating your application? Why is it needed? (Is it?)