javascript - 按宽度排列标签以适应容器

Question

我制作了标签组件，每个标签都有不同的宽度。

容器使用 max-width 进行固定，这会强制标签以正确的顺序排列以适合最大宽度，这是问题的一个示例。

https://codesandbox.io/s/sort-tags-ust5m?fontsize=14&hidenavigation=1&theme=dark

想知道您是否知道如何重新排序标签以适应容器中的有效布局？

谢谢，

Answer 1

您应该研究将矩形包装成矩形的问题。这是一篇带有代码示例的小文章。每次标签容器的大小发生变化（resize 事件触发）时，您都应该重新呈现按上面示例中的脚本排序的标签列表。当然，脚本应该首先适应您的特定情况。