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 | X |
