Latest web development tutorials
 

Style order Property

< Style Object

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

Internet Explorer Firefox Opera Google Chrome Safari

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