CSS Order Property (original) (raw)

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 `

`

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 `

`

**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 `

`

**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 `

`

**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.