使用具有可调整大小和可排序元素的flexbox进行布局的布局有哪些选项

Question

在我的角度应用程序中,我使用ui-sortable来排序<ul>.

元素本身是可调整大小的.

这类似于我的设置:

我希望"4"和"5"使用它们顶部的空间:

这是一个小提琴.请注意,这是一个过于简单的示例,并且元素实际上可由用户调整大小并可排序.

像砌体这样的库不会这样做,因为它们使用绝对定位的元素,这将取消ui-sortable的工作方式,调整大小也不会推动元素.

那我该怎么做呢？

• 我是否正确理解只有css解决方案才能实现这一点？flexbox将获得最高元素的高度,并将该高度放到"行".
• 是否有任何不依赖的js解决方案position: abolute,或者更确切地说,它仍然会让我排序？
• 什么是我的选择没有摆脱我已经有图书馆？
• 我有哪些选择摆脱我已有的库？

Answer 1

我相信我也遇到过类似的问题。我最终选择了http://isotope.metafizzy.co。然后，一旦用户更改了框的大小（或顺序），您就可以在 UI 回调上运行一个方法来重新布局框：http://isotope.metafizzy.co/methods.html#layout