CSS - order 属性

CSS 的order属性用于指定弹性项目在弹性容器中出现的顺序。弹性项目的顺序由其order属性的值决定。order值较低的弹性项目将首先显示。

语法

order: number | initial | inherit;

属性值

值	描述
数字	使用数字值（正数或负数）指定弹性项目的顺序。对于正数，值越小，元素越先出现；对于负数，值越大，元素越先出现。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

CSS Order 属性示例

以下示例使用不同的元素解释了order属性。

使用正数的 Order 属性

可以通过为order属性指定正数来设置弹性项目的顺序。对于正数，值越小，元素越先出现。以下示例说明了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 150px;
         display: flex;
         gap: 4px;
      }

      .container>div {
         padding: 10px;
         text-align: center;
         height: 70px;
         width: 70px;
      }

      .box1 {
         background-color: lightgreen;
         order: 2;
      }

      .box2 {
         background-color: lightblue;
         order: 4;
      }

      .box3 {
         background-color: lightcoral;
         order: 1;
      }

      .box4 {
         background-color: lightgray;
         order: 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS order property
   </h2>
   <h4>
      order: 2-4-1-3 (first element- second position, 
      second element- fourth position, third element- 
      first position, fourth element- third position)
   </h4>
   <div class="container">
      <div class="box1">
         One
      </div>
      <div class="box2">
         Two
      </div>
      <div class="box3">
         Three
      </div>
      <div class="box4">
         Four
      </div>
   </div>
</body>

</html>

使用负数的 Order 属性

可以通过为order属性指定负数来设置弹性项目的顺序。对于负数，值越大，元素越先出现。以下示例说明了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 150px;
         display: flex;
         gap: 4px;
      }

      .container > div {
         padding: 10px;
         text-align: center;
         height: 70px;
         width: 70px;
      }

      .box1 {
         background-color: lightgreen;
         order: -2;
      }

      .box2 {
         background-color: lightblue;
         order: -1;
      }

      .box3 {
         background-color: lightcoral;
         order: -3;
      }

      .box4 {
         background-color: lightgray;
         order: -4;
      }
   </style>
</head>

<body>
   <h2>
      CSS order property
   </h2>
   <h4>
      order: -2 / -1 / -3 / -4 (first element- third position, 
      second element- fourth position, third element- second 
      position, fourth element- first position)
   </h4>
   <div class="container">
      <div class="box1">
         One
      </div>
      <div class="box2">
         Two
      </div>
      <div class="box3">
         Three
      </div>
      <div class="box4">
         Four
      </div>
   </div>
</body>

</html>

带图片的 Order 属性

order属性也可以与作为弹性项目的图像一起使用。图像的位置取决于提供的值——正数或负数。以下示例说明了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 150px;
         display: flex;
         gap: 4px;
      }

      .container>img {
         height: 100px;
         width: 100px;
      }

      .img1 {
         background-color: lightgreen;
         order: 4;
      }

      .img2 {
         background-color: lightblue;
         order: 2;
      }

      .img3 {
         background-color: lightcoral;
         order: 1;
      }

      .img4 {
         background-color: lightgray;
         order: 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS order property
   </h2>
   <h4>
      order: 4-2-1-3 (first image- fourth position, 
      second image- second position, third image - 
      first position, fourth image - third position)
   </h4>
   <div class="container">
      <img src="/css/images/red-flower.jpg" 
      alt="flower" class="img1" />
      <img src="/css/images/orange-flower.jpg" 
      alt="flower" class="img2" />
      <img src="/css/images/white-flower.jpg" 
      alt="flower" class="img3" />
      <img src="/css/images/pink-flower.jpg" 
      alt="flower" class="img4" />
   </div>
</body>

</html>

支持的浏览器

属性
order	29	12	28	9.0	12.1

css_properties_reference.htm

打印页面