Style order attribute

Definition and usage

order This attribute specifies the order of the flexible item relative to the other flexible items within the same container.

Note:If the element is not a flexible item, then order Attribute is invalid.

See also:

CSS reference manual:order attribute

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

Syntax

Return order attribute:

object.style.order

Set order attribute:

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

Attribute value

Value Description
number Default value 0. Defines the order of the flexible items.
initial Sets this attribute to its default value. See initial.
inherit Inherits this attribute from its parent element. See inherit.

Technical details

Default value: 0
Return value: A string representing the element's order attribute.
CSS version: CSS3

Browser support

The numbers in the table indicate the first browser version to fully support this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support 12.0 Support Support Support

Related pages

HTML DOM STYLE Reference Manual:alignContent attribute

HTML DOM STYLE Reference Manual:alignItems attribute

HTML DOM STYLE Reference Manual:alignSelf attribute

HTML DOM STYLE Reference Manual:flex attribute

HTML DOM STYLE Reference Manual:flexBasis attribute

HTML DOM STYLE Reference Manual:flexDirection Property

HTML DOM STYLE Reference Manual:flexFlow Property

HTML DOM STYLE Reference Manual:flexGrow Property

HTML DOM STYLE Reference Manual:flexShrink Property

HTML DOM STYLE Reference Manual:flexWrap Property