Example
Set the order of the flexible items:
document.getElementById("myRedDIV").style.order = "4";
document.getElementById("myBlueDIV").style.order = "3";
document.getElementById("myGreenDIV").style.order = "1";
document.getElementById("myPinkDIV").style.order = "2";
Try it Yourself »
Definition and Usage
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.
Note: If the element is not a flexible item, the order property has no effect.
Browser Support
The order property is supported in Firefox, Opera, and Chrome.
Syntax
Return the order property:
object.style.order
Set the order property:
object.style.order="number|initial|inherit"
Property Values
| Value | Description |
|---|---|
| number | Default value 0. Specifies the order for the flexible item |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | 0 |
|---|---|
| Return Value: | A String, representing the order property of an element |
| CSS Version | CSS3 |
Related Pages
CSS reference: order property
HTML DOM STYLE Reference: alignContent property
HTML DOM STYLE Reference: alignItems property
HTML DOM STYLE Reference: alignSelf property
HTML DOM STYLE Reference: flex property
HTML DOM STYLE Reference: flexBasis property
HTML DOM STYLE Reference: flexDirection property
HTML DOM STYLE Reference: flexFlow property
HTML DOM STYLE Reference: flexGrow property
HTML DOM STYLE Reference: flexShrink property
HTML DOM STYLE Reference: flexWrap property
< Style Object