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 属性支持该属性。
  

Copy after login

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.

---

CSS Syntax

order:number|initial|inherit;

Attribute Value

##JavaScript syntax:

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

##inherit For 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.