CSS order Property

Course recommendation:

Definition and usage

The order property specifies the order of the flexible items relative to the other flexible items within the same container.Note:

If the element is not a flexible item, the order property is invalid.

align-items propertySee also:

align-items propertyflex property

align-items propertyflex-basis property

align-items propertyflex-direction property

align-items propertyflex-flow property

align-items propertyflex-grow property

align-items propertyflex-shrink property

align-items propertyflex-wrap property

align-items propertyalign-content property

align-items propertyCSS Reference Manual:

align-self propertyHTML DOM Reference Manual:

order property

Example

Set the order of the flexible items:
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}

div#myPinkDIV {order: 1;}

Try it yourself

CSS syntax Descriptionorder:

|initial|inherit;

Attribute value Value
Description number
Sets this property to its default value. See The default value is 0. Specifies the order of the flexible items. Sets this property to its default value. SeeAnimation-related properties
Inherits this property from its parent element. See initial Inherits this property from its parent element. SeeAnimation-related properties

inherit

Technical details Default value:
0 Inheritance:
no Animation production:Supported. Refer to the individual properties. Refer to:Animation-related properties
. Version:
CSS3 JavaScript syntax:

object.style.order="2"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0