CSS Order property of flexible elastic box model

Instance

Set the order of the Elastic box object elements:

2. P # MYREDP {order:2;}

4. P # Mybluep {order:4;}

6. P # MYGREENP {order:3;}

8. p # MYPINKP { order : 1 ;}

<! DOCTYPE html>
Effect Preview


 

Browser support

The number in the table represents the version number of the first browser that supports the property.

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


 

 
  
 
   
 
    
Properties
 
    
 
 
    
 
 
    
 
 
    
 
 
    
 
 
   
 
   
 
    
Order
 
    
29.0
21.0-webkit-
 
    
11.0
 
    
28.0
18.0-moz-
 
    
9.0
6.1-webkit-
 
    
17.0
 
   
 
  

 

 

Definition and usage

The Order property sets or retrieves the order in which the child elements of the elastic box model object appear:

Note: If the element is not an element of the elastic box object, the Order property does not work.


 

 
  
 
   
 
    
 
 
    
0 
 
   
 
   
 
    
 inherit: 
 
    
 no 
 
   
 
   
 
    
 can be animated: 
 
    
 Yes,  see individual properties . See  CSS3 Animated Properties, CSS3 animated instances . Effect Preview 
 
   
 
   
 
    
 version: 
 
    
CSS3 
 
   
 
   
 
    
JavaScript Syntax:
 
    
object. style.order= "2" effect preview
 
   
 
  

 


 

CSS syntax



Order: number |initial|inherit;

Property value



 

 
  
 
   
 
    
value
 
    
 Description
 
   
 
   
 
    
number  
 
    
 
   
 
   
 
    
initial  
 
    
 
   
 
   
 
    
Inherit
 
    
Inherit the property from the parent element. See Inherit.
 
   
 
  

 
More flexible elastic box model CSS Order properties related articles please follow topic.alibabacloud.com!
