CSS order Property

Flex is a layout system that arranges items in rows and columns.

The position of each item can be specified with the order property.

It sets the item order relative to the other items inside the container.

Example

#

Each flex item inside the container sets their own order.

1
2
3
4
<style>
  .flex-order {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-order > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-order">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

Syntax

order: number | initial | inherit;

Values

#

Value Description
number Default is 0, sets flexible items order
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Browser support

This table shows when order support started for each browser.

Chrome
29.0 Aug 2013
Firefox
28.0 Mar 2014
IE/Edge
11.0 Oct 2013
Opera
17.0 Aug 2013
Safari
9.0 Sep 2015

You may also like

Guides