CSS-de flex bloglaryň tertibi

Aşakdaky hatarda tertiplenen bloglarymyz bolsun:

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

Результат:

Geliň, olary ekranda görkeziliş tertibini üýtşetäýliň, HTML kodundaky tertibini üýtgetmän.

Bunun üçin order häsiýeti bar, olar konkret elementleriň yzygiderligini şu düzgün boýunça belgileýär: kimifiň bahasy uly bolsa, şol oküň ahyryna ýakyn durýar, we kimifiň kiçi bolsa - şol oküň başyna ýakyn durýar.

Häsiýetiň bahasy pozitiw ýa-da negatiw san bolup biler. Bellenen ýagdaýda ähli elementler biri-biriniň yzydan gidýär, bu bolsa order olaryň nolda dygyny aňladýar.

Geliň elementleriň tertibini üýtşetäýliň. Bunun üçin ikinji elemente goşmaça elem klasyny bereliň we şu klas üçin order häsiýetini 1 bahasyna goýalyň:

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

Bellenen ýagdaýda ähli elementleriň tertibi 0 bolar, bizifiň ikinji elementimiziň tertibi başgalaryňkydan uly bolar, şonuň üçin ol olardan soň ýerleşer:

Indi bolsa, -1 negatiw bahasyny bereliň:

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

Bu ýagdaýda bizifiň blogymyz oküň başyna tarap ýerleşer: