CSS Property order
The order property is a property of the Flexible Box Layout.
Flex items are displayed in the same order as they appear in the source document by default.
The order property can change this ordering.
Summary
- Initial value
- 0
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.order="2"
- Animatable
- yes
CSS Syntax
order: number|initial|inherit;
Property Values
- number
- Default value 0. Set the order for the flexible item
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
order |
Yes | 11.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<style>
.flex-container {<!-- ww w. j ava 2s . c o m-->
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.flex-item:nth-of-type(1) { order: 3; }
.flex-item:nth-of-type(2) { order: 4; }
.flex-item:nth-of-type(3) { order: 1; }
.flex-item:nth-of-type(4) { order: 5; }
.flex-item:nth-of-type(5) { order: 2; }
.flex-item {
background: red;
padding: 5px;
width: 100px;
height: 100px;
margin: 5px;
line-height: 100px;
color: white;
}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
</body>
</html>