Ordning för flexboxar i CSS

Låt oss säga att vi har följande block, uppradade i en rad:

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

Результат:

Låt oss ändra ordningen de visas i utan att ändra deras ordning i HTML-koden.

För detta finns egenskapen order, som anger ordningen för specifika element enligt följande regel: den med högre värde står närmare slutet av axeln, och den med lägre värde står närmare början.

Egenskapen kan ta ett positivt eller negativt tal som värde. Som standard följer alla element efter varandra, vilket betyder att deras order är noll.

Låt oss ändra ordningen på våra element. För att göra detta, sätt en extra klass elem på det andra elementet och för den klassen sätt egenskapen order till värdet 1:

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

Eftersom alla element som standard kommer att ha ordningen 0, och vårt andra element kommer att ha en högre ordning än de andra, kommer det att placeras efter dem:

Låt oss nu sätta ett negativt värde -1:

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

I det här fallet kommer vårt block att flyttas till början av axeln: