CSS orderProperty

CSS Reference


Example

Set the order of flexbox object elements:

div#myRedDIV {order:2;}
div#myBlueDIV {order:4;}
div#myGreenDIV {order:3;}
div#myPinkDIV {order:1;}

Try it Yourself »

Browser Support

The numbers in the table indicate the first browser version that supports the property.

The number following -webkit-, -ms-, or -moz- is the first version that supports the prefixed property.

Property
order 29.0
21.0 -webkit-
11.0 28.0
18.0 -moz-
9.0
6.1 -webkit-
17.0

Definition and Usage

order property Sets or retrieves the order in which child elements of a flexible box model object appear.

Note:If the element is not an element of a flexible box object, the order property has no effect.

Default value: 0
Inherited: no
Animatable: is,See the individual propertiesPlease refer to.Animatable。 Try it Yourself
version: CSS3
JavaScript Syntax: object.style.order="2" Try it Yourself


CSS Syntax

order: number|initial|inherit;

Property value

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


Related Articles

CSS Reference Manual:flex property

CSS Reference Manual:flex-basis property

CSS Reference Manual:flex-direction property

CSS Reference Manual:flex-flow property

CSS Reference Manual:flex-grow property

CSS Reference Manual:flex-shrink property

CSS Reference Manual:flex-wrap property

CSS Reference Manual:align-content property

CSS Reference Manual:align-items Property

CSS Reference Manual:align-self property


CSS Reference

other extensions