Definition
The order CSS property is used in flexbox layouts to control the order in which flex items are displayed within their flex container. It specifies the order of appearance for individual flex items, overriding their default order based on their position in the source code.
The order property accepts integer values, with a lower value indicating an earlier position and a higher value indicating a later position. By default, flex items have an order value of 0.
Here’s an example:
.item {
order: 2;
}
In this example, the .item class sets the order of a flex item to 2. This means it will be positioned after items with a lower order value or before items with a higher order value within the flex container.
You can adjust the order values of flex items to rearrange their order of appearance. For instance, setting order: 1 would place the item before other items with the default order, while setting order: -1 would position it before items with an order value of 0.
The order property is a powerful tool for controlling the visual order of flex items, allowing you to create flexible and responsive layouts. It enables you to customize the sequence of elements based on your design requirements, independent of their source code order.