如何使用 CSS Flexbox 根据屏幕宽度重新排序 Div？

使用 CSS 更改 Div 顺序，具体取决于设备宽度

创建响应式网站时，可以在不同设备上保持所需的布局一个挑战。其中一个问题是屏幕尺寸变化时 div 的重新排列。虽然在较小的屏幕上垂直堆叠 div 很简单，但根据布局对它们进行不同的排序可能会更复杂。

例如，让我们考虑一个具有两列 div 的场景。在较大的屏幕上，div 水平显示，但当屏幕宽度变窄时，它们会垂直堆叠。但是，我们要求垂直布局中的 div 有特定的顺序。

传统上，将使用 JavaScript 来执行此类任务。然而，在这种情况下，JavaScript 不是一个选择。因此，我们转向多功能的 CSS flexbox 规范来实现我们的目标。

使用 'order' 和 'flex-flow' 属性，我们可以创建满足我们要求的布局。请注意，所有常青浏览器和 IE11 都支持此解决方案，尽管有 IE10 的供应商前缀。

在我们的 CSS 中，我们定义了 div 属性，例如宽度、高度和内联块显示。我们还为每个 div 分配颜色类。

接下来，我们定义一个媒体查询，当屏幕宽度降至 531 像素以下时激活。在此查询中，我们将容器的显示属性修改为“flex”和“column”，确保 div 在较窄的屏幕上垂直堆叠。

然后，我们指定 div 在垂直方向上显示的顺序布局。使用 'order' 属性，我们为应该出现在垂直堆栈顶部附近的 div 分配更高的顺序值。

这是一个说明性示例：

.container div {
  width: 100px;
  height: 50px;
  display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  .five { order: 1; }
  .four { order: 2; }
  .three { order: 3; }
  .two { order: 4; }
  .one { order: 5; }
}

<div class="container">
  <div class="one">I'm first</div>
  <div class="two">I'm second</div>
  <div class="three">I'm third</div>
  <div class="four">I'm fourth</div>
  <div class="five">I'm fifth</div>
</div>

以上是如何使用 CSS Flexbox 根据屏幕宽度重新排序 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！