CSS da flex modelida alohida elementni tekislash
Keyin o'rganadigan xususiyatlarimiz
endi fleks-elementlarning ota-onasiga berilmaydi,
balki elementlarning o'zlariga beriladi. Keling, alohida
blokni ko'ndalang o'q bo'yicha tekislaydigan
align-self xususiyatini ko'rib chiqaylik.
Keling, qatorda joylashgan fleks-bloklarimiz bo'lsin.
Ularni vertikal bo'yicha markazga tekislash uchun,
align-items ni center qiymatiga o'rnating,
ikkinchi elementga qo'shimcha elem klassini bering
va unga boshqa tekislashni o'rnating,
masalan, uni yuqori chetga bog'lang.
Buning uchun elem klassidagi elementimizga
align-self xususiyatini flex-start
qiymatiga o'rnatamiz:
<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;
}
:
