CSS3 order
Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The order
CSS property specifies the order in which a flex items are displayed and laid out within a flex container. Elements are laid out by ascending order of the order value. Elements with the same order value are laid out in the order they appear in the source code.
The following table summarizes the usages context and the version history of this property.
Default value: | 0 |
---|---|
Applies to: | Flex items and absolutely-positioned children of flex containers |
Inherited: | No |
Animatable: | yes. See animatable properties. |
Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the order
property in action.
Example
Try this code ».flex-container {
border: 2px solid #000;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.item1 {
width: 100px;
background: #ff80c0;
-webkit-order: 2; /* Safari 6.1+ */
order: 2;
}
.item2 {
width: 100px;
background: #8080ff;
-webkit-order: 1; /* Safari 6.1+ */
order: 1;
}
.item3 {
width: 100px;
background:#0080ff;
}
Property Values
The following table describes the values of this property.
Value | Description |
---|---|
integer | Specifies the order for the flexible item. The default value is 0. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element order property. |
Browser Compatibility
The order
property is supported in all major modern browsers.
Basic Support—
|
Further Reading
See tutorial on: CSS Fonts, CSS Units, CSS Pseudo-elements.
Related properties: align-content
, align-items
, align-self
, display
, flex
, flex-basis
, flex-direction
, flex-flow
, flex-grow
, flex-shrink
, flex-wrap
, justify-content
, min-height
, min-width
, order
.