使用tile布局的CSS过渡动画是否有可能实现？

Question

我正在努力创建一个特定的解决方案，我已经尝试了很多东西，但我只是不确定是否有可能实现。我需要你的意见，指出我正确的方法。按照我要创建的内容：

最初有一个瓷砖布局，其中一定数量的卡（比如12个）放在4x3网格中：

现在，如果用户点击某个图块（框3），状态将更改为以下内容：

展开选定的图块，右侧的其他图块在另一个下方对齐：

挑战是我想要从每个磁贴的初始状态创建一个过渡到每个磁贴在右边一个接一个对齐的状态。同时，当单击一个图块时，它会在适当的位置展开。 注意 - 位置没有突然改变，没有重新加载页面，最好没有JS（我想编写一个只有CSS的解决方案）。一切顺利地动画到新的位置。如果选择了不同的图块（从右侧），则从第二个屏幕开始，然后展开的项目将缩小并进入右侧堆叠，同时所选项目将展开并取代当前展开的（B3）。

如果你能指出我正确的方向，那将是很有帮助的。

感谢。

Answer 1

你应该检查css flexbox。 使用＆＃34;命令＆＃34; proprety，你可以将每个盒子的顺序从2到8， 每次选中一个方框时，你将它的顺序改为1，你也可以改变它的大小和颜色。

但是，我不认为你可以点击＆＃39;仅使用css的操作。 我建议您使用JS来实现您的目标。

希望有所帮助