CSS-тегі flex модельінде жеке элементті туралау

Біз зерделейтін келесі қасиеттер енді флекс-элементтердің ата-анасына емес, элементтердің өздеріне беріледі. Біз көлденең ось бойынша жеке блокты туралайтын align-self қасиетін қарастырайық.

Бізде қатарға тізілген флекс-блоктар бар делік. Оларды тігінен ортаға туралау үшін, align-items қасиетіне center мәнін беріңіз, ал екінші элементке elem қосымша сыныбын беріп, оған басқа туралау орнатыңыз, мысалы, оны жоғарғы жағына жанастырыңыз.

Бunың үшін elem сыныбы бар элементімізге align-self қасиетін 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;
}

Бүл үлгі бойынша бетті қайталаңыз: