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中文网其他相关文章！
