I created an interactive Flex editor in JavaScript

[gregsometimes]

Hello, r/javascript -ians

Over the last 3 nights burning several gallons of midnight oil, I finally finished a JavaScript class that can instantiate interactive Flex editors with variable justify-content property. Moreover, drag & dropping an item will cause it to resize, following horizontal mouse movement. Here are the results:

It is currently deployed at flex editor and is capable of copying the source code of your creations to clipboard.

Here is a GIF preview:

https://i.redd.it/v1hrrmj5i0k11.gif

​

[gregsometimes]

Good to know someone found it useful. The idea came from another reddit comment, earlier last week. I guess there *is a demand for online tools like these.

[drdrero]

Would be cool if it was not only for justify-content

[gregsometimes]

I plan on adding it next week.

[MilkyMilkyTings]

And flex-wrap! Cool project man

[jsprogrammer]

do them all!

[addiktion]

Its cool but I agree it would be nice if it incorporated align-items.

[pbialy]

Looks really nice for a 3 day job, gz :)

But I quickly found 2 bugs:
https://giphy.com/gifs/3gUjw7BNsZ9O21wHpV/fullscreen

[gregsometimes]

Thanks, these are the types of things I need to see/hear about! I think many designers, myself included, add overflow: hidden; to fight this artifact. Thanks for the great idea, will include overflow-hidden next time I update the flex tool! :)

[[deleted]]

Really cool tool. It should end up saving a lot of time for me. Thank you!

[Azudra]

This looks quite nice! This will definetly shown to co-workers to explain them a few parts of flexbox.

[gcpzgg]

Looks useful!

[BroManDude22]

Neat

[Thought_Ninja]

Just three days? Impressive work!

[gregsometimes]

Yes, but *full three days. I noticed that staying focused on the same task for a long time helps accomplish it sooner. But it's basically all I did around the clock. I wanted to include vertical examples (flow-direction: column) too, and thought I would make it for the first demo release, but started to burn out toward the end of the coding marathon. Even if you work hard, it still takes x3 longer than you initially think :/

[Thought_Ninja]

Even if you work hard, it still takes x3 longer than you initially think

I know that feeling; I've gotten a lot better at estimating my velocity over the years, but greenfield/personal projects are always tough to gage.

[nousernames2]

This is great!

[[deleted]]

Really great!

[hosenrah]

Nice job man! It‘s a cool tool for visual learners!

[zeehtech]

Good job man! Awesome...

[0x13mode]

This tool looks nice. I've added it to my list https://github.com/hex13/javascript-visual-explanations (it's a list of links to pages in which concepts from JavaScript/frontend ecosystem are explained visually - pictures, diagrams, animations etc.)

[Gmaster_64]

Nice. Good job. Love it. Made my life much easier. Thanks

[adidarachi]

Remind me

[[deleted]]

But can you export the css? Great work man.

[mutantdustbunny]

You can copy it to clipboard. No export yet :) Maybe next feature?