CSS order Property
Example
Set the order of the flexible items:
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}
Definition and Usage
The order property specifies the visual order of a flex
item or grid item in a flex or grid container.
Note: If the element is not a flex item or grid item, the
order property has no effect.
Accessibility note: The order
property provides visual reordering, but it does not change the logical order of
elements in the DOM. This will affect users navigating the site with assistive
technologies like screen readers, as the content will be read in a different
order than it is visually presented.
| Default value: | 0 |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.order="2" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| order | 29 | 12 | 28 | 9.0 | 12.1 |
CSS Syntax
Property Values
| Value | Description | Demo |
|---|---|---|
| number | Default value 0. Specifies the order for the flex item or grid item | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS Reference: flex property
CSS Reference: flex-basis property
CSS Reference: flex-direction property
CSS Reference: flex-flow property
CSS Reference: flex-grow property
CSS Reference: flex-shrink property
CSS Reference: flex-wrap property
CSS Reference: align-content property
CSS Reference: align-items property
CSS Reference: align-self property
HTML DOM reference: order property