Rækkefølge af flex-blokke i CSS

Lad os sige, at vi har følgende blokke, arrangeret i en række:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат:

Lad os ændre rækkefølgen af deres visning på skærmen uden at ændre deres rækkefølge i HTML-koden.

For dette findes egenskaben order, som angiver rækkefølgen af specifikke elementer efter følgende regel: den med højere værdi står tættere på aksens ende, og den med lavere værdi står tættere på starten.

Egenskaben kan tage en positiv eller negativ værdi. Som standard følger alle elementer hinanden, hvilket betyder, at deres order er nul.

Lad os ændre rækkefølgen af vores elementer. For at gøre dette, lad os give det andet element en ekstra klasse elem og for denne klasse sætte egenskaben order til værdien 1:

css.elem {
  order: 1;
  border: 1px solid red;
}

Da alle elementer som standard vil have rækkefølge 0, og vores andet element vil have en højere rækkefølge end de andre, vil det placeres efter dem:

Lad os nu give en negativ værdi -1:

css.elem {
  order: -1;
  border: 1px solid red;
}

I dette tilfælde vil vores blok flytte sig til aksens start: