CSS Order 属性

简介

CSS Order 属性用于定义 HTML 元素的显示顺序。该属性适用于通过 CSS 中的 Flexbox 或 Grid 布局设计的页面。

语法

order: <number>;

• <number>：指定元素应该出现的顺序。较小的值将在较大的值之前显示。默认为 0。

使用示例

以下是一些使用 CSS Order 属性的示例。

示例 1：基本使用

.box {
  display: flex;
}

.box div {
  order: 2;
}

.box .first {
  order: 1;
}

<div class="box">
  <div>Second</div>
  <div class="first">First</div>
  <div>Third</div>
</div>

在上面的示例中，我们使用 Flexbox 布局将一组 div 元素包装在容器中，并为其中的第一个 div 元素设置了较小的 order 值（1），使其在显示时排在第一位。

示例 2：修改默认顺序

.box {
  display: flex;
}

.box div {
  order: 1;
}

.box .second {
  order: -1;
}

<div class="box">
  <div>First</div>
  <div class="second">Second</div>
</div>

在上面的示例中，我们通过将第二个 div 元素的 order 设置为 -1 来修改默认顺序，使其在显示时排在第一位，而第一个 div 元素保持默认的顺序（0）。

示例 3：使用负值

.box {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.box div {
  order: 2;
}

.box .first {
  order: -1;
}

<div class="box">
  <div>Second</div>
  <div class="first">First</div>
  <div>Third</div>
  <div>Fourth</div>
</div>

在上面的示例中，我们使用 Grid 布局将一组 div 元素包装在容器中，并将第一个 div 元素的 order 设置为 -1，使其在显示时排在其他元素之前。

示例 4：媒体查询中的 CSS Order

.box {
  display: flex;
}

.box div {
  order: 1;
}

@media (max-width: 600px) {
  .box .second {
    order: -1;
  }
}

<div class="box">
  <div>First</div>
  <div class="second">Second</div>
</div>

在上面的示例中，我们使用媒体查询来为较小的屏幕尺寸重新定义 CSS Order 属性。当屏幕宽度小于或等于 600px 时，第二个 div 元素的 order 被修改为 -1，使其在显示时排在第一位。

浏览器兼容性

CSS Order 属性在以下浏览器中得到支持：

• Chrome
• Firefox
• Safari
• Opera
• Edge

参考链接

• CSS Order Property - MDN