order

Controla el orden de los ítems flex. Por defecto, todos tienen order: 0. Los ítems con un valor menor aparecerán antes.

Un ítem con order: -1 aparecerá antes que uno con order: 0.
Un ítem con order: 1 aparecerá después de los que tienen order: 0.

Ejemplo

Los items se colocan de menor a mayor valor de order y, con el mismo valor, respetan el orden del HTML. Cambia el order del hijo con la clase item para llevarlo delante o detrás de sus hermanos.

Selecciona order:

-101

ResultadoEn vivoAncho del contenedor100%

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;
}

Edita el código o usa los selectores: el resultado cambia al instante.