CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS outline attribute CSS3 opacity attribute

CSS3 Usage and examples of the order property

The order CSS property specifies the display and layout order of flexible items within a flexible container. Elements are arranged in ascending order of their order values. Elements with the same order values are laid out in the order they appear in the source code.

The following table describes the usage instructions and version history of this attribute, as well as the usage syntax of this attribute in JavaScript scripts.

Default value:	0
Applicable to:	For Flex items and Flex containersAbsolute positioningDescendants
Inheritance:	No
Animatable:	is.Please refer to Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.order="2"

The syntax of order usage

The syntax of this attribute is as follows:

order: integer | initial | inherit

The following example demonstrates how to use the order attribute.

Example

.flex-container {
　　　　border:　2px solid #000;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
}

Test see‹/›

Attribute value

The following table describes the value of this attribute.

Value	Description
integer	Specify the order of the flexible items. The default value is 0.
initial	Set this attribute to its default value.
inherit	If specified, the associated elements adopt the order attribute value of their parent element.

Browser compatibility

The compatibility of order attribute in browsers, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox18+ ^-moz-,28+ Google Chrome 21+ ^-webkit-,29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

Please refer to the following tutorial:CSS fonts,CSS units,CSS pseudo-elements.