CSS order attribute of Flexible flexible box model

Example

Set the order of flexbox object elements:

1. pmyRedp {order:2;}

2. p#myBluep {order:4;}

3. p#myGreenp {order:3;}

4. p#myPinkp {order:1;}

##

  

  

  

  



注意: Internet Explorer 10 及更早版本浏览器不支持 order 属性。
注意: Safari 6.1 及更新版本通过 -webkit-order 属性支持该属性。

Effect preview

---

Browser support

The number in the table indicates the version number of the first browser that supports this attribute.

The number immediately following -webkit-, -ms- or -moz- is the first version that supports this prefix attribute.

Attributes
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 the flexbox model object appear. .

Note: If the element is not an element of the flexbox object, the order attribute has no effect.

##JavaScript syntax:

---

CSS Syntax

order: number|initial|inherit;

Attribute Value

Default value:	0
Inheritance:	No
Animatable:	Yes, see individual properties. Please refer to CSS3 animation properties, CSS3 animation examples. Effect preview
Version:	CSS3
	object.style.order="2" Effect preview

##inheritFor more CSS order attributes of Flexible flexible box model and related articles, please pay attention to the PHP Chinese website!

##Value	Description
number	The default value is 0. Specify the sequence of flexible projects.
##initial	Set this property to its default value. See initial.
##Inherit this property from the parent element. See inherit.