CSS-də flex modelində ayrı-ayrı elementlərin düzülməsi
Öyrənəcəyimiz aşağıdakı xassələr
artıq flex elementlərinin valideyninə yox,
öz-özünə elementlərə təyin olunur. Gəlin align-self xassəsini nəzərdən keçirək,
bu xassə ayrı-ayrı bloku çarpaz ox boyunca düzür.
Tutaq ki, bizdə sıra ilə düzülmüş flex-blokları var.
Onları şaquli olaraq mərkəzə düzək,
align-items-ı center dəyərində təyin edək,
ikinci elementə isə əlavə elem sinifi verək
və onun üçün fərqli düzülmə təyin edək,
məsələn, onu yuxarı kənara sıxaq.
Bunun üçün elem sinifli elementimizə
align-self xassəsini flex-start
dəyərində təyin edək:
<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;
}
:
