A flex blokkok sorrendje CSS-ben

Tegyük fel, hogy a következő blokkjaink vannak, sorba rendezve:

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

Результат:

Változtassuk meg a képernyőn való megjelenésük sorrendjét anélkül, hogy megváltoztatnánk a HTML kódban való sorrendjüket.

Erre szolgál a order tulajdonság, amely a konkrét elemek követési sorrendjét a következő szabály szerint határozza meg: akinek nagyobb az értéke, az áll közelebb a tengely végéhez, akinek kisebb - az áll közelebb az elejéhez.

A tulajdonság értéke pozitív vagy negatív szám lehet. Alapértelmezetten minden elem egymás után következik, ez azt jelenti, hogy a order értékük nulla.

Változtassuk meg elemeink sorrendjét. Ehhez adjunk a második elemnek egy további elemm osztályt, és ennek az osztálynak állítsuk be a order tulajdonságot 1 értékre:

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

Mivel az összes elem alapértelmezetten 0 sorrenddel rendelkezik, a második elemünk pedig nagyobb sorrenddel, mint a többi, ezért azok után fog elhelyezkedni:

Most adjunk meg negatív értéket -1:

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

Ebben az esetben a blokkunk a tengely elejére kerül: