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