Flexbox resizing

Question

I\'m trying to come up with an effective way of defining a nested flexbox and allow it to be resized. I think it\'s almost there:

http://jsfiddle.net/6j10L3x2/1/

Answer 1

Note: There is also the new, basic resize CSS property, but it's only for bottom right corner dragging.

---

I did some research on this, and the first 3 framework-free, fully baked results I came across were, in order of appearances (untested):

1. https://daybrush.com/moveable

   • "Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable"
   • I love the look of things here, both visually and code-wise! Seems highly functional and extremely flexible as well.
   • See also: https://github.com/daybrush/moveable https://daybrush.com/moveable/release/latest/doc
   • UPDATE: I tried this one out, I actually would not recommend it. It's very complicated to use, poorly documented, and I'd rather write my own JS instead.

2. https://split.js.org

   • Looks nice, but it appears to only be for split panels specifically, no e.g. corner dragging. If that's all you want, this might be a good option.
   • See also: https://github.com/nathancahill/split/tree/master/packages/splitjs https://github.com/nathancahill/split/tree/master/packages/split-grid

3. https://jspanel.de

   • Not as aesthetic as I would like, but seems like it has a good set of functionality and options.
   • See also: https://github.com/Flyer53/jsPanel4

I also found this: http://w2ui.com/web/home https://github.com/vitmalina/w2ui