CSS - order Property

Quiz

CSS order property is used to specify the order in which flex items appear within a flex container. 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.

Syntax

order: number | initial | inherit;

Property Values

Value	Description
number	Order of flex items is specified using numeric values - positive or negative values. With positive values, the element with smaller positive value appears first. With negative values, the element with larger negative value appears first.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Order Property

The following examples explain the order property with different elements.

Order Property with Positive Numeric Values

The order of the flex-items can be set by specifying positive numeric values to the order property. With positive values, the element will smaller value appears first. This is shown in the following example.

Example

<!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 Property with Negative Numeric Values

The order of the flex-items can be set by specifying negative numeric values to the order property. With negative values, the element will larger value appears first. This is shown in the following example.

Example

<!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 Property with Images

The order property can also be used with images as flex-items. The positions of the images depend on the values provided - positive or negative. This is shown in the following example.

Example

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

Supported Browsers

Property
order	29	12	28	9.0	12.1

css_reference.htm

Print Page