Style order Property

Style 对象参考手册Style Object

Example

Set the order of 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 other flexible items in 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

Firefox, Opera, and Chrome support the order property.


Syntax

Return the order property:

object.style.order

Set the order property:

object.style.order="number|initial|inherit"

Property Values

Value Description
number The default value is 0. Specifies the order of the flexible item.
initial Sets this property to its default value. Seeinitial。
inherit Inherits this property from its parent element. Seeinherit。

Technical Details

Default value: 0
Return value: A string, representing the order property of an element.
CSS Version CSS3


Related Articles

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 对象参考手册Style Object

Other Extensions