javascript - 当元素不适合屏幕时如何移动它们

Question

我想重新排序类似于flex-wrap: wrap的元素，但我想重新排序元素。一个很好的例子是 Youtube。在非移动设备上观看任何 Youtube 视频（比如这个） 。缩小页面后，右侧的推荐视频位于描述和评论部分之间。如果他们只使用 flex wrap，推荐的视频将位于评论部分下方。我将如何做类似的事情？

我假设你需要一些 javascript，但我不确定我将如何处理这个问题。谢谢！

标签： javascripthtmlcssflexbox

Answer 1

如果您使用display: flex，则有order弹性项目的参数（即弹性容器的子项），您可以使用它定义任何您想要的顺序，也可以在包装的弹性容器中。示例： order: 3;在应该按顺序排在第三位的弹性项目上。