在 HTML 中获取 Flex Tile Container 的功能

Question

Flex 磁贴容器将随着数据的变化创建和删除磁贴，并且在内容动态的区域中使用起来似乎很不错。如何在 HTML 中实现此功能？我想我们需要使用一些 JS 和/或 CSS。有输入吗？

Answer 1

您可以完全忽略 CSS（用于布局），并以 flex 实现它的方式执行此操作。在不提供代码本身的情况下，这是基本思想（假设水平布局）：

1. 添加孩子时，将其添加到前一个兄弟的右侧。 (c.y = s.y+s.width)。
2. 检查当前子项是否超过父项的宽度。 (c.y + c.width > p.width)。如果是这样，请将其放到下一个“行”。

当然，事情会变得更加复杂，具体取决于您是想做 TileContainer 还是 FlowContainer。布局应该看起来像一个网格，还是应该像段落换行那样更有机？ （如果你想要的只是段落换行，我认为让所有内容都“浮动：左”会为你做到这一点，但如果我错了，请纠正我。）。假设 TileContainer 的想法，你只需要遍历所有的孩子并确保它们具有相同的高度/宽度（== 最大孩子高度，最大孩子宽度），然后执行上面提到的布局步骤。您可能希望将每个子元素放在容器 div 中，以便更轻松地控制无法很好调整大小的元素。

最后，只要确保您侦听任何窗口大小调整事件，您就可以运行您的布局算法。

如果您需要提示，请查看 Flex 中“TileBase.as”中的算法，但自己动手可能会更容易。