CSS Order Property

Last Updated : 10 Jan, 2025

The order property defines the arrangement of flexible items inside a flex container, determining their position relative to one another. It allows you to visually reorder items without affecting their order in the source code.

The default value of the order property is 0, with higher values appearing later in the visual order.
The property applies only to items inside a flex container and does not affect non-flexible items or containers.

Syntax

order: number | initial | inherit;

Property values:

number: Specifies the order of a flexible item; items with lower numbers appear first.
initial: Resets the property to its default value (0).
inherit: Inherits the order value from its parent element.

HTML

<html>
<head>
    <style>
        .item1 {
            order: 2;
        }
        .item2 {
            order: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
    </div>
</body>
</html>

1. Using Number property

The number value in the order property specifies the position of a flexible item relative to others in a flex container.

Syntax:

order: number;

HTML

<html>
<head>
    <style>
        .container {
            display: flex;
        }
        .item1 {
            order: 2;
        }
        .item2 {
            order: 1;
        }
        .item3 {
            order: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

In this example

The .container is a flex container with three child items.
Each item is assigned an order value:
- .item1 has order: 2;
- .item2 has order: 1;
- .item3 has order: 3;

Items are displayed based on their order values, resulting in the sequence: Item 2, Item 1, Item 3.

2. Using initial Value

The initial value resets the order property to its default value, which is 0.

Syntax:

order:initial;

HTML

<html>
<head>
    <style>
        .container {
            display: flex;
        }
        .item1 {
            order: 2;
        }
        .item2 {
            order: initial;
        }
        .item3 {
            order: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

In this example

.item1 has order: 2;, placing it after items with lower order values.
.item2 has order: initial;, which resets its order to the default value of 0.
.item3 has order: 1;, placing it between items with order 0 and 2.

3. Using inherit Value

The inherit value makes the order property inherit its value from its parent element.

HTML

<html>
<head>
    <style>
        .container {
            display: flex;
            order: 3;
        }
        .item1 {
            order: inherit;
        }
        .item2 {
            order: 1;
        }
        .item3 {
            order: 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

In this example

The .container has an order value of 3, but since it's not a flex item itself, this value doesn't affect its positioning.
.item1 has order: inherit;, attempting to inherit the order value from its parent.
.item2 has order: 1;, and .item3 has order: 2;, determining their positions within the flex container.

Best Practices for Using CSS order Property

Use Order Sparingly: Rely on the natural document order whenever possible to avoid unnecessary complexity in your layouts.
Combine with Flexbox: Use order effectively within a flex container to rearrange items visually without altering the source code.
Default to Natural Flow: Set order only when specific reordering is required, as excessive use may lead to confusion in maintaining the layout.