order property
Specifies the order in which a flex item within a flex container is displayed.
This property is read/write.
  |
Syntax
order: <integer>
Property values
The ordinal group number.
<integer>-
Integer value that identifies the group that a flex item belongs to.
CSS information
| Applies To | flex items and absolutely-positioned flex container children |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value | 0 |
Standards information
Remarks
As of Microsoft Edge, the "-ms-" prefixed version of this property is not supported.
Prior to Internet Explorer 11, this property was known as -ms-flex-order. For more information on these compatibility changes, see Flexible box ("Flexbox") layout updates.
By default, flex items in a flex container are displayed in the same order as in the source document unless changed with this property.
As of Internet Explorer for Windows Phone 8.1 Update and Microsoft Edge, IE supports the deprecated "-webkit-box-ordinal-group" or "-webkit-order" property for interoperability purposes. However unlike the order property, "-webkit-box-ordinal-group" does not accept integers less than 1.
Examples
In the example below, a flex container with three flex items are displayed in the same order as in the source document.
<div id="flexContainer"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> </div>
#flexContainer {
border: solid 1px #949494;
display: flex;
}
#item1 {
width: 50px;
background:#66CC33;
}
#item2 {
width: 50px;
background:#0099FF;
}
#item3 {
width: 50px;
background:#DAA520;
}
If you use the same HTML snippet as above, you can add the order property to the flex items in the CSS and adjust the order that the flex items appear on screen. In the example below, order is set to 2 for the first flex item in the container, and set to 1 for the second flex item in the container. After using the order property, the flex container looks like the following image.
#flexContainer {
border: solid 1px #949494;
display: flex;
}
#item1 {
width: 50px;
background:#66CC33;
order: 2;
}
#item2 {
width: 50px;
background:#0099FF;
order: 1;
}
#item3 {
width: 50px;
background:#66CC33;
}
See also
