Yksittäisen elementin kohdistus CSS:n flex-mallissa
Seuraavat ominaisuudet, joita opimme,
eivät aseteta flex-elementtien vanhemmalle,
vaan itse elementeille. Tarkastellaan
align-self-ominaisuutta, joka kohdistaa yksittäisen
lohkon poikittaista akselia pitkin.
Oletetaan, että meillä on flex-lohkot, jotka on asetettu
riviin. Kohdistetaan ne keskelle pystysuunnassa
asettamalla align-items arvoon center,
ja annetaan toiselle elementille lisäluokka
elem ja sille asetetaan erilainen kohdistus,
esimerkiksi kiinnitetään se yläreunaan.
Tätä varten asetamme elementille, jolla on luokka elem,
ominaisuuden align-self arvoksi
flex-start:
<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;
}
:
