CSS order Property

Description

The order property defines the order in which flexes are displayed inside the flex container. Elements are arranged according to the order property from smaller to larger. With equal order values, the elements are displayed in the order in which they appear in the source code.

Initial value
0
Applies to
Flex items and absolutely-positioned flex container children
Inherited
No
Media
Visual
Computed value
As specified
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.order

Syntax

order: <integer>

Values

  • <integer>The value is any integer, including negative numbers and zero.

Example

<h3>order: -1;</h3> 
<div class="container">
<div> A </div>
<div> B </div>
<div> C </div>
<div> D </div>
<div> E </div>
</div>
<h3>order: 1; </h3>
<div class="container2">
<div> A </div>
<div> B </div>
<div> C </div>
<div> D </div>
<div> E </div>
</div>
<h3>order: 2;</h3>
<div class="container3">
<div> A </div>
<div> B </div>
<div> C </div>
<div> D </div>
<div> E </div>
</div>
.container, .container2, .container3 { 
   display: -webkit-flex;
   display: flex;  
} 
div>div { 
   width: 50px; 
   height: 50px;
   border: 1px solid orange; 
} 
.container div:nth-of-type(4) {
   order: -1; 
   background: Tan;
}
.container2 div:nth-of-type(4) { 
   order: 1;
   background: Tan;
} 
.container3 div:nth-of-type(4) { 
   order: 2;
   background: Tan;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
1112292012.19
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
4.4292012.19X