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>

Click to view the demo