Css 简明教程

CSS - Order

What is an order?

CSS order 属性用于指定柔性项目在柔性容器内出现的顺序。

CSS order property is used to specify the order in which flex items appear within a flex container.

柔性项目的顺序由其 order 属性的值决定。带有较低 order 值的柔性项目将最先显示。

The order of the flex items is determined by the values of their order property. The flex items with the lower order value will be displayed first.

以下是需要记住的其他事项：

Here are some additional things to keep in mind:

  1. The order property is not inherited by child elements.

  2. The order property only affects flex items.

  3. The default value of the order property is 0.

以下列出了可用于属性 order 的所有可能值：

Following are all possible values that can be used for property order:

  1. integer: Represents the ordinal group to be used by the item.

  2. inherit: Uses the same value of its parent.

  3. initial: The element uses default value i.e 0.

CSS Order Integer

CSS order 属性设为整数。order 属性的值可以为任何正整数或负整数。

The CSS order property is set to an integer value. The value of the order property can be any positive or negative integer.

我们可使用具有正整数值的 order 属性。正值意味着具有最高正序值的项目将最后显示。

We can use order property with positive integer value. A positive value means that the item with the highest positive order value will be displayed last.

Example

示例如下：

Here is an example −

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

CSS order 属性可设为负整数。负值意味着具有最高负序值的项目将首先显示。

The CSS order property can be set to a negative integer value. A negative value means that the items with the highest negative order value will be displayed first.

Example

示例如下：

Here is an example −

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

CSS Order Initial

order: initial 值仅将项目的 order 属性设回其初始值，该初始值通常为 0。

The order: initial value simply sets the order property of the item back to its initial value, which is usually 0.

Example

示例如下：

Here is an example −

<html>
<head>
<style>
   .my_flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }
   .my_flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="my_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 值，那么 flex 项目将基于 HTML 标记以其默认顺序显示。

If you set the order property to unset value, the flex item will be displayed in it’s default orde based on the HTML markup.

Example

以下是一个示例，其中 order 属性设置为对 flex 项目 3 设置为 unset。然后 flex 项目 3 的顺序将按默认顺序显示——

Here is an example where order property is set to unset to the flex item 3. Then order of the flex item 3 will be displayed in the default order −

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

   .my_flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="my_flex_container">
      <div style="order: 2">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 标记中出现的顺序显示，但顺序相反。

When we set the order property to the revert value, the flex item will be displayed in the order it appears in the HTML markup, but with the order reversed.

Example

以下是一个示例，其中 order 属性对第五个 flex-item 设置为 revert。然后第五个 flex-item 的顺序将相反，因此它将首先显示——

Here is an example where Order property is set to revert for the fifth flex-item. Then order of the fifth flex-item will be reversed, so it will be displayed first −

<!DOCTYPE html>
<html>
<head>
<style>
   .my_flex_container {
      display: flex;
      background-color: #0ca14a;
      height: 90px;
   }
   .my_flex_container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 10px;
      height: 50px;
      text-align: center;
   }
</style>
</head>
<body>
<div class="my_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: revert">Item 5</div>
   <div style="order: 4">Item 6</div>
</div>
</body>
</html>