The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

/* <integer> values */ order: 5; order: -5;  /* Global values */ order: inherit; order: initial; order: revert; order: unset; 

order

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.

Syntax

/* <integer> values */ order: 5; order: -5;  /* Global values */ order: inherit; order: initial; order: revert; order: unset; 

Since order is only meant to affect the visual order of elements and not their logical or tab order. order must not be used on non-visual media such as speech.

Values

<integer>

Represents the ordinal group to be used by the item.

Accessibility concerns

Using the order property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.

Flexbox & the keyboard navigation disconnect — Tink Source Order Matters | Adrian Roselli MDN Understanding WCAG, Guideline 1.3 explanations Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0

Formal definition

Initial value	0
Applies to	Flex items, grid items, and absolutely-positioned flex and grid container children
Inherited	no
Computed value	as specified
Animation type	an integer

Formal syntax

<integer>

Examples

Ordering items in a flex container

This example uses CSS to create 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.

HTML

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

CSS

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

Specification
CSS Display Module Level 3 # order-property

See also

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

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Русский中文 (简体) Change language