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
11	12	29	20	12.1	9
Tablets / Mobile
4.4	29	20	12.1	9	2.0

Last updated by CSSPortal on: 4th November 2019