Export (0) Print
Expand All

order property

Specifies the order in which a flex item within a flex container is displayed.

This property is read/write.

Flexible Box Layout ModuleIE11

 

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 Toflex items and absolutely-positioned flex container children
Mediavisual
Inheritedno
Initial Value0

Standards information

Remarks

As of Internet Explorer for Windows 10 Technical Preview, the "-ms-" prefixed version of this property is not supported in the "Edge" document mode.

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 Internet Explorer for Windows 10 Technical Preview, 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.

A flex container with three flex items


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

A flex container with three flex items with their order adjusted


#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

CSSStyleDeclaration

 

 

Show:
© 2015 Microsoft