Lastnost order

Lastnost order določa vrstni red posameznega flex bloka znotraj flex kontejnerja. Uporablja se za posamezen flex blok.

Lastnost sprejme pozitivno ali negativno celo število. Manjše kot je število, prej se bo element prikazal, neodvisno od njegovega položaja v HTML kodi glede na druge elemente.

Sintaksa

cssselektor {
  order: pozitivno ali negativno število;
}

Primer

V tem primeru je vsem blokom določen vrstni red z lastnostjo order. Prvi bo blok z negativnim order -1, nato z order 1 in tako naprej po naraščajočem vrstnem redu:

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

Результат:

Glej tudi