order

Definition

The order property in CSS is used to control the order in which flex items are displayed in a flex container. It assigns a numerical value to a flex item, which determines its position within the flex container.

Examples

Display the first item first:

.flex-container {
  display: flex;
}
.flex-item:first-child {
  order: -1;
}

Display the last item first:

.flex-container {
  display: flex;
}
.flex-item:last-child {
  order: -1;
}

Display the third item first:

.flex-container {
  display: flex;
}
.flex-item:nth-child(3) {
  order: -1;
}

Values

Best practices

• Use order sparingly and only when necessary, as it can affect the natural order of the content and may make it difficult for users to navigate.
• Consider using flex-direction instead of order to change the order in which flex items are displayed. This is often a more semantically meaningful way to rearrange content.
• Avoid using large negative values for order, as this can make the layout confusing and difficult to understand.
• Test the order property in different browsers to ensure consistent behavior.
• Use order in combination with other flexbox properties to create complex and dynamic layouts.

Browser Compatibility