Uitlijning van een individueel element in het flexmodel in CSS
De volgende eigenschappen die we zullen bestuderen,
worden niet meer ingesteld op de ouder van de flex-elementen,
maar op de elementen zelf. Laten we de eigenschap
align-self bekijken, die een individueel
blok uitlijnt langs de dwarsas.
Stel we hebben flexblokken die in een rij zijn geplaatst.
Laten we ze verticaal gecentreerd uitlijnen,
door align-items in te stellen op de waarde center,
en geven we het tweede element een extra klas
elem en geven we daarvoor een andere uitlijning,
bijvoorbeeld, laten we het tegen de bovenkant aan plaatsen.
Hiervoor stellen we voor ons element met de klasse elem
de eigenschap align-self in op de waarde
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;
}
:
