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

列印頁面