如何针对不同的屏幕尺寸有效地重新排列 Flexbox 项目？

Flex Order 属性：重新排列移动和桌面视图的项目

管理容器内项目的布局时，order 属性以及Flexbox 可以是一个强大的工具。然而，当尝试专门针对移动设备和更大屏幕视图重新排列项目时，可能会出现挑战。

考虑以下场景：容器内有三个 div，在移动设备上的顺序设置为 2、1 和 3使用订单属性。这在移动设备上效果很好。然而，在较大的屏幕上，顺序会显得不正确。

这个问题的根本原因在于 Flexbox 的本质。 Flexbox 旨在通过分配容器内的空间来对齐内容。在行换行容器中，项目必须换行到新行，这与项目可以任意换行的网格系统不同。

因此，在 Flexbox 容器中，项目 div3 无法换行到项目 div2 下方，因为它会创建一个网格 -喜欢布局而不是直行。因此，行中不是最高的项目之间会出现间隙。

为了避免这些难看的间隙，请考虑使用列换行而不是行换行。在列换行容器中，项目换行到新列，从而允许 div2 和 div3 可以垂直对齐的布局。

例如：

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}
div.orange {
  background-color: orange;
}
div.blue {
  order: -1;
  background-color: aqua;
}
div.green {
  background-color: lightgreen;
}
.container > div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 800px) {
    .container {
        flex-wrap: wrap;
    }
    div.orange {
        flex-basis: 100%;
        width: 50%;
    }
    div.blue {
        flex-basis: 50%;
        width: 50%;
        order: 0;
    }
    div.green {
        flex-basis: 50%;
        width: 50%;
    }
}

在此示例中，移动布局保持2、1、3 的顺序，而桌面布局将项目重新排列为 1、2、3。间隙被消除，因为项目垂直换行而不是水平。

以上是如何针对不同的屏幕尺寸有效地重新排列 Flexbox 项目？的详细内容。更多信息请关注PHP中文网其他相关文章！