Justering av individuella element i flex-modellen i CSS

Följande egenskaper som vi ska studera, tillämpas inte på föräldern till flex-elementen, utan på elementen själva. Låt oss titta på egenskapen align-self, som justerar ett individuellt block längs tväraxeln.

Låt oss säga att vi har flex-block uppradade i en rad. Vi centrerar dem vertikalt genom att sätta align-items till värdet center, och ger det andra elementet en extra klass elem och för det sätter vi en annan justering, till exempel fäst den mot den övre kanten.

För att göra detta sätter vi egenskapen align-self för vårt element med klassen elem till värdet 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;
}

Återskapa sidan enligt följande exempel: