Atsevišķa elementa izlīdzināšana flex modelī CSS

Šīs īpašības, kuras mēs tagad pētīsim, tiek noteiktas nevis vecākelementam, bet pašiem elementiem. Apskatīsim īpašību align-self, kas izlīdzina atsevišķu bloku šķērsasī.

Pieņemsim, ka mums ir flex bloki, sakārtoti rindā. Izlīdzināsim tos vertikāli centrā, iestatot align-items uz vērtību center, un otram elementam piešķirsim papildu klasi elem un tam iestatīsim citu izlīdzinājumu, piemēram, piespiedīsim to pie augšējās malas.

Lai to izdarītu, mūsu elementam ar klasi elem iestatīsim īpašību align-self uz vērtību 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;
}

Atkārtojiet lapu pēc šī parauga: