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;

Note: 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.


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

Formal syntax



Here is a basic HTML chunk:


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; }


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.


Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'order' in that specification.
Candidate Recommendation Initial definition

Initial value0
Applies toflex items and absolutely-positioned flex container children
Computed valueas specified
Animation typean integer
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support


21 -webkit-


12 -webkit-


49 -webkit-

48 -webkit- 2

18 — 283


10 -ms-



7 -webkit-

Absolutely-positioned flex children Yes12 No1012.1 Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ?


Yes -webkit-


49 -webkit-

48 -webkit- 2

18 — 283



7 -webkit-

Absolutely-positioned flex children ? ? ? No12.1 Yes ?

1. Since Firefox 28, multi-line flexbox is supported.

2. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also