Export (0) Print
Expand All
1 out of 1 rated this helpful - Rate this topic

order property

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

Note   As of Internet Explorer 11 the Microsoft vendor prefix ("-ms-") version of this property is no longer supported. Instead use the non-prefixed name order, which is preferred for better standards compliance and future compatibility.

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

By default, flex items in a flex container are displayed in the same order as in the source document unless changed with this property.

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:
© 2014 Microsoft. All rights reserved.