CSS Order

CSS Order 属性

CSS 的 order 属性用于指定弹性盒子或网格项目在容器中出现的顺序。弹性盒子或网格项目的顺序由它们的 order 属性值决定。具有较低 order 值的弹性盒子或网格项目将首先显示，而具有最高值的项目将最后显示。

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

integer : 代表要使用的项目的序号组。
inherit : 使用其父级的相同值。
initial : 元素使用默认值，即0。
unset : 元素使用默认值，即0。

以下是需要记住的一些附加事项：

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

CSS Order – 整数值

CSS 的 order 属性可以设置为整数值，可以是任何正整数或负整数。正值意味着具有最高正 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值

order：initial 这个值将项目的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置值

如果将 order 属性设置为 unset ，则弹性项目将根据HTML标记的默认顺序显示。

示例

下面是一个示例，其中order属性被设置为unset以将弹性项目的第一个和第三个项目显示在默认顺序中。

<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 值

当我们将 order 属性设置为 revert 值时，flex项目将按照它们在HTML代码中的顺序显示，就像网页没有包含任何CSS样式一样。

示例

下面是一个例子，其中Order属性被设置为revert，对于第一个和第五个flex项目。现在它们将按照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>