order
Baseline: Widely supported
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
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.
Try it
Syntax
css
/* <integer> values */
order: 5;
order: -5;
/* Global values */
order: inherit;
order: initial;
order: revert;
order: revert-layer;
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.
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
order =
<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
html
<header>…</header>
<main>
<article>Article</article>
<nav>Nav</nav>
<aside>Aside</aside>
</main>
<footer>…</footer>
CSS
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 |
Browser compatibility
BCD tables only load in the browser
See also
- CSS Flexbox Guide: Basic Concepts of Flexbox
- CSS Flexbox Guide: Ordering flex items
- CSS Grid Guide: CSS Grid Layout and accessibility