CSS - 顺序

CSS 顺序属性

CSS order属性用于指定 Flex 或网格项目在容器中出现的顺序。Flex 或网格项目的顺序由其 order 属性的值确定。顺序值较低的 Flex/Grid 项目将首先显示，顺序值最高的项目将显示在最后。

以下是可用于属性顺序的所有可能值：

整数：表示项目要使用的序数组。
继承：使用与其父级相同的值。
初始：元素使用默认值，即0。
unset：元素使用默认值，即 0。

以下是一些需要记住的额外事项：

order属性不会被子元素继承。
order属性仅影响弹性项目。
容器中的项目按值升序排序。
order属性的默认值为0。

CSS 顺序 - 演示

尝试为 CSS order属性选择不同的值，并在右侧框中查看结果。

CSS 顺序 - 整数值

CSS order 属性可以设置为整数值，可以是任何正整数或负整数。正值意味着正序值最高的项目将显示在最后，负值最大的项目将显示在第一个项目。

例子

这是一个例子 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }
   .flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div style="order: 2">Item 1</div>
      <div style="order: 6">Item 2</div>
      <div style="order: 4">Item 3</div>
      <div style="order: -1">Item 4</div>
      <div style="order: 5">Item 6</div>
      <div style="order: -2">Item 7</div>
   </div>
</body>
</html>

CSS 顺序 - 初始值

order :initial value 只是将项目的 order 属性设置回其初始值，通常为 0。

例子

这是一个例子 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }
   .flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div style="order: 5">Item 1</div>
      <div style="order: 3">Item 2</div>
      <div style="order: 1">Item 3</div>
      <div style="order: 6">Item 4</div>
      <div style="order: initial">Item 5</div>
      <div style="order: 4">Item 6</div>
   </div>
</body>
</html>

CSS 顺序 - 未设置值

如果将order属性设置为unset，则 Flex 项目将按照基于 HTML 标记的默认顺序显示。

例子

下面是一个示例，其中 order 属性设置为取消设置为弹性项目第 1 和第 3。然后这些弹性项目的顺序将以默认顺序显示 -

<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }

   .flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="flex_container">
      <div style="order: unset">Item 1</div>
      <div style="order: 4">Item 2</div>
      <div style="order: unset">Item 3</div>
      <div style="order: 1">Item 4</div>
      <div style="order: 3">Item 5</div>
      <div style="order: 5">Item 6</div>
   </div>
</body>
</html>

CSS 顺序 - 恢复值

当我们将order属性设置为revert值时，flex 项目将按照其出现的顺序显示，就像网页未包含任何 CSS 一样。

例子

下面是一个示例，其中 Order 属性设置为恢复第一个和第五个弹性项目。现在，它们将按照 HTML 代码格式化后的顺序显示。

<!DOCTYPE html>
<html>
<head>
<style>
   .flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }
   .flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
<div class="flex_container">
   <div style="order: revert">Item 2</div>
   <div style="order: 3">Item 1</div>
   <div style="order: 1">Item 3</div>
   <div style="order: 6">Item 4</div>
   <div style="order: revert">Item 5</div>
   <div style="order: 4">Item 6</div>
</div>
</body>
</html>