CSS - order Property
CSS - order Property
CSS order property is used to specify the order in which flex items appear within a flex container. The order of the flex items is determined by the values of their order property. The flex items with the lower order value will be displayed first.
Syntax
order: number | initial | inherit;Property Values
| Value | Description |
|---|---|
| number | Order of flex items is specified using numeric values - positive or negative values. With positive values, the element with smaller positive value appears first. With negative values, the element with larger negative value appears first. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Order Property
The following examples explain the order property with different elements.
Order Property with Positive Numeric Values
The order of the flex-items can be set by specifying positive numeric values to the order property. With positive values, the element will smaller value appears first. This is shown in the following example.
Example
Order Property with Negative Numeric Values
The order of the flex-items can be set by specifying negative numeric values to the order property. With negative values, the element will larger value appears first. This is shown in the following example.
Example
Order Property with Images
The order property can also be used with images as flex-items. The positions of the images depend on the values provided - positive or negative. This is shown in the following example.
Example
Supported Browsers
| Property | |||||
|---|---|---|---|---|---|
| order | 29 | 12 | 28 | 9.0 | 12.1 |