Svojstvo order

Svojstvo order zadaje redosled praćenja pojedinačnog flex bloka unutar flex kontejnera. Primerjuje se na konkretan flex blok.

Svojstvo kao vrednost prihvata pozitivan ili negativan ceo broj. Što je broj manji - to će element biti ranije, bez obzira na položaj u HTML kodu u odnosu na druge elemente.

Sintaksa

cssselektor {
  order: pozitivan ili negativan broj;
}

Primer

U ovom primeru svim blokovima je zadat redosled raspoređivanja pomoću order. Prvi će biti blok sa negativnim order -1, pa sa order 1 i tako dalje u rastućem redosledu:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
  <div id="elem5">5</div>
  <div id="elem6">6</div>
</div>

css#parent {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}
#parent > div {
  border: 1px solid #696989;
  min-width: 100px;
}
#elem1 {
  order: 4;
}
#elem2 {
  order: 5;
}
#elem3 {
  order: 3;
}
#elem4 {
  order: 2;
}
#elem5 {
  order: 1;
}
#elem6 {
  order: -1;
}

Результат:

Vidi takođe