Egyedi elem igazítása a flex modellben CSS-ben

A következő tulajdonságok, amelyeket tanulmányozni fogunk, már nem a flex elemek szülőjére vonatkoznak, hanem magukra az elemekre. Nézzük meg a align-self tulajdonságot, amely egyedi elemet igazít a keresztirányú (cross) tengely mentén.

Tegyük fel, hogy vannak flex elemek, amelyek sorba vannak rendezve. Középre igazítjuk őket függőlegesen, beállítva a align-items tulajdonságot center értékre, majd a második elemnek adjunk egy további elem osztályt és számára állítsunk be egy másik igazítást, például igazítsuk a tetejéhez.

Ehhez a elem osztállyal rendelkező elemnek beállítjuk a align-self tulajdonságot flex-start értékre:

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

css.parent {
  display: flex;
  align-items: center;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
.elem {
  align-self: flex-start;
}

Результат: