Justering af individuelle elementer i flex-modellen i CSS
De følgende egenskaber, som vi vil studere,
tildeles ikke længere forældren til flex-elementerne,
men til selve elementerne. Lad os se på egenskaben
align-self, som justerer en individuel
blok langs den tværgående akse.
Lad os sige, at vi har flex-blokke, arrangeret
i en række. Vi centrerer dem vertikalt
ved at sætte align-items til værdien center,
og giver det andet element en ekstra klasse
elem og for det tildeler vi en anden justering,
for eksempel sætter vi det mod den øverste kant.
For at gøre dette sætter vi egenskaben align-self
for vores element med klassen elem
til værdien 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;
}
:
