有哪些选项可以使用带有可调整大小和可排序元素的 flexbox 进行类似砌体的布局

Posted 2023-02-19

【中文标题】有哪些选项可以使用带有可调整大小和可排序元素的 flexbox 进行类似砌体的布局

【英文标题】：What are the options for having a masonry like layout with flexbox with resizable and sortable elements

【发布时间】：2015-07-17 01:57:14

【问题描述】：

在我的 Angular 应用程序中，我使用 ui-sortable 对 <ul> 进行排序。

元素本身可以调整大小。

这类似于我的设置：

我希望“4”和“5”使用它们顶部的空间：

这是fiddle。请注意，这是一个过于简单的示例，并且元素实际上可以由用户调整大小并且可以排序。

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

那么我该如何实现呢？

我是否正确理解了仅使用 css 的解决方案是不可能的？该弹性框将获取最高元素的高度并将该高度放在“行”

。 是否有任何不依赖position: abolute 的 js 解决方案，或者更确切地说，它仍然可以让我进行排序？ 我有哪些选择

不

摆脱我已有的库？ 我有哪些选择可以摆脱已有的库？

【问题讨论】：

您的元素似乎按列排列，列中的每个子元素的宽度相等。如果是这种情况，那么您确实可以使用 flexbox 来排列您的元素。只需使用display:flex、flex-direction:column 的 3 个容器 div（每列 1 个）并分配每个子 div flex:1 1 auto。设置容器 div 的 width 和 height。

这是一个过于简单的例子，盒子基本上是任意大小的（并且由用户更改），我唯一能保证的是它们保持一定的比例/比例。

所以所有元素都与它们的原始大小成比例地增长或缩小？然后我评论的解决方案仍然有效。无论如何，使用像 Masonry 或 Isotope 这样的外部库可能比使用 flexbox 和在列容器之间移动你的孩子更容易。顺便说一句，如果你想“自己动手”，你可以谷歌“装箱算法”。祝你的项目好运！

@markE 嗯不，我不认为我已经完全解释了这个问题，因为可排序从左到右，自上而下，并且元素完全可以调整大小，所以如果我做一个列布局，当你的盒子增长时，我垂直的“空间浪费”将是水平的，因为列将采用最大元素的大小，还是不会？

"元素完全可以调整大小" == 不适合 FLEXbox！一个讽刺的声明，是吗？ Flexbox 是方向灵活的——它们要么垂直弯曲，要么水平弯曲，但不能同时两者兼而有之。孩子们可以被拉伸以填充空白空间，但这只是将空白空间放在孩子们的内部而不是外部。用 Masonry、Isotope 或类似的东西解决。

【参考方案1】：

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