CSS - Order

What is an order?

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.

Here are some additional things to keep in mind:

  • The order property is not inherited by child elements.

  • The order property only affects flex items.

  • The default value of the order property is 0.

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

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

  • inherit: Uses the same value of its parent.

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

CSS Order Integer

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

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>

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

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

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

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

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

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