order

Controls the order of the flex items. By default, all have order: 0. Items with a smaller value will appear first.

An item with order: -1 will appear before one with order: 0.
An item with order: 1 will appear after those with order: 0.

Example

Items are placed from lowest to highest order value and, with the same value, they follow the HTML order. Change the order of the child with the item class to move it before or after its siblings.

Select order:

-101

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  order: 0;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  order: 0;
}

Edit the code or use the selectors: the result updates instantly.