What are the options for having a masonry like layout with flexbox with resizable and sortable elements

Question

In my angular app, I'm using ui-sortable to sort an <ul>.

The elements itself are resizable.

This is similar to the setup I have:

And I would like that "4" and "5" use the space on top of them:

Here is a fiddle. Please note that this is an oversimplified example, and that the elements are actually resizable by the user and sortable.

Libraries like masonry won't do because they use absolutely positioned elements, that will undo the way the ui-sortable works, the resize won't push the element's either.

So how can I achieve this?

• Have I understood correctly that this is not possible with a css only solution? That flexbox will get the height of the highest element and put that height to the "row".
• Is there any js solution that won't rely on position: abolute, or rather, that it will still let me sort?
• What are my options without getting rid of the libraries I already have?
• What are my options getting rid of the libraries I already have?

Birdsall

Your elements seem to be arranged in columns with each child element in a column being of equal width. If that's the case then you can indeed use flexbox to arrange your elements. Just have 3 container divs (1 for each column) with display:flex, flex-direction:column and assign each child div flex:1 1 auto. Set the width and height of your container divs. – Oneidaoneil

This is an oversimplified example, the boxes are any size basically (and changed by the user), the only thing I can guarantee is that they keep a certain proportion/ratio. – Birdsall

So all elements grow or shrink proportionally to their original sizes? Then my commented solution still works. Anyway, using an external library like Masonry or Isotope is probably easier than using flexbox and moving your children between column containers. BTW, If you want to "roll-your-own" you can Google "bin packing algorithms". Good luck with your project! – Oneidaoneil

@Oneidaoneil hmm no, I don't think I have fully explained the problem, since the sortable goes from left to right, top down, and the elements are completly resizable, so if I do a column layout, the "waste of space" that I have vertically will be horizontal when you the box grows, as the column will take the size of the biggest element, or wont it? – Birdsall

"the elements are completely resizable" == not a good fit for FLEXbox! An ironic statement, yes? Flexboxes are directionally flexible--they either flex vertically or horizontally but not both at the same time. Children can be stretched to fill the empty space, but that just puts the empty space inside instead of outside the children. Solve with Masonry, Isotope or something similar. – Oneidaoneil

doesn't isotope solve your problem? – Murat

What you are looking for (provided you don't want to do it with JavaScript) is CSS Grid Layout (w3.org/TR/css-grid-1). Unfortunately, adoption is still on the experimental level (as referenced here: caniuse.com/#feat=css-grid). Might be worth keeping in mind for future reference, though. – Williamwilliams

Answer 1

I believe I have had a similar issue. I ended up going with http://isotope.metafizzy.co . Then once the user changes the size of the box (or order), you can run a method on the UI callback to re-layout the boxes: http://isotope.metafizzy.co/methods.html#layout

Maloney