W3docs
en
Log in

CSS order property

Use the order CSS property for specifying the order of an element inside a flexible container. See property values and try examples.

The order property is used to specify the order of a flexible item inside the flex or grid container.

The order property is a part of the Flexible Box Layout module.

The order property is one of the CSS3 properties.

Info

If the element is not a flexible item, the order property does not work.

Accessibility Concerns

The order property creates a disconnection between the content’s visual display and DOM order. Visual reordering does not change the DOM order, which impacts screen reader navigation. Users relying on assistive technology (e.g., screen readers) will experience the original DOM order, not the visually reordered layout.

Initial Value0
Applies toFlex items and grid items.
InheritedNo.
AnimatableNo. The order property is discrete and not animatable.
VersionCSS3
DOM SyntaxObject.style.order = "4";

Syntax

CSS order syntax

order: number | initial | inherit;

Example of the order property:

CSS order code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 400px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
      }
      #example div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-family: sans-serif;
      }
      div#blue {
        order: 2;
      }
      div#green {
        order: 3;
      }
      div#grey {
        order: 1;
      }
      div#yellow {
        order: 4;
      }
    </style>
  </head>
  <body>
    <h2>Order property example</h2>
    <div id="example">
      <div style="background-color: #1c87c9;" id="blue">1</div>
      <div style="background-color: #8ebf42;" id="green">2</div>
      <div style="background-color: #666;" id="grey">3</div>
      <div style="background-color: #f4f442;" id="yellow">4</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

Order property

Example of the order property applied to the container class:

CSS order flexbox example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
      }
      .box:nth-of-type(1) {
        order: 4;
      }
      .box:nth-of-type(2) {
        order: 1;
      }
      .box:nth-of-type(3) {
        order: 3;
      }
      .box:nth-of-type(4) {
        order: 5;
      }
      .box:nth-of-type(5) {
        order: 2;
      }
      .box {
        background: #1c87c9;
        padding: 5px;
        width: 100px;
        height: 100px;
        margin: 5px;
        line-height: 100px;
        color: #eee;
        font-weight: bold;
        font-size: 2em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Order property</h2>
    <ul class="container">
      <li class="box">1</li>
      <li class="box">2</li>
      <li class="box">3</li>
      <li class="box">4</li>
      <li class="box">5</li>
    </ul>
  </body>
</html>
Try it Yourself »

In the above-mentioned examples, the order property defines the order for flex or grid items. According to the user requirement, each item is given a number.

Values

ValueDescription
numberDefines the order for the flex or grid item in the container. The default value is 0.
initialMakes the property use its default value.
inheritInherits the property from its parent element.

Practice

Practice

What does the CSS 'order' property do?