Style order Property

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 »

Description

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

Property
order Yes 12.0 Yes Yes Yes

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


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.