order

The order CSS property specifies the order used to lay out a flex or grid item in its flex or grid container. Items within the same container are laid out in ascending order according to their order values. Elements with the same order value are laid out in the order in which they appear in the source code.

/* <integer> values */
order: 5;
order: -5; 

/* Global values */
order: inherit;
order: initial;
order: unset;

Syntax

Values

<integer>

Represents the ordinal group to be used by the flex item. May be positive, negative, or 0.

Formal syntax

<integer>

Example

Here is a basic HTML chunk:

<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>

The following CSS code creates a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available.

main { display: flex;  text-align:center; }
main > article { flex:1;        order: 2; }
main > nav     { width: 200px;  order: 1; }
main > aside   { width: 200px;  order: 3; }

Result

Specifications

Browser compatibility

See also

• CSS Flexbox Guide: Basic Concepts of Flexbox
• CSS Flexbox Guide: Ordering flex items
• CSS Grid Guide: CSS Grid Layout and accessibility