CSS order property specifies the order in which the flex items should be displayed within the flex container.
The flex items get displayed in the increasing order of their order value. By default, the order value is set to 0 for each flex item.
The order property can accept a positive, negative, or a zero value.
By default, the flex items are displayed in the same order they are placed in the HTML code. But, with the help of the order property, we can change the default order of the flex items without changing their position in the HTML code. See the example below:
Example:
#item1{
order: 2;
}
#item2{
order: 3;
}
#item3{
order: 1;
}
If two or more flex items have the same order value, they will be displayed in the same order as their HTML code. As in the example below, the first and the third both flex items have order: 2;. But, the first flex item will be displayed before the third flex item because it comes first in the HTML code.
Example:
#item1{
order: 2;
}
#item3{
order: 2;
}
Negative values are also allowed. We generally use a negative value when we want one flex item display before all other flex items without changing their order.
For example, if we set order: -1; for the third flex item, it will place the third item before all other flex items without changing their order. This is because by default all other flex items have order: 0; and -1 comes before 0. Try out the example below:
Example:
#item3{
order: -1;
}
CSS Syntax
The order property has the following syntax:
order: integer|initial|inherit;
Property Values
The order property accepts the following values:
| integer | Defines the order of flex items within the flex container. The default value is 0. It may be positive, negative or zero. |
| initial | Sets the order property to its default value(0). |
| inherit | Inherits the order property from the parent element. |
General Info
| Default Value | 0 |
| Inherited | No |
| JavaScript Usage | element.style.order= “3” |
