CSS'te Flex Modelde Tekil Eleman Hizalama
Şimdi inceleyeceğimiz özellikler artık
esnek (flex) elemanların ebeveynine değil,
elemanların kendisine verilir. Şimdi, tekil
bir bloğu çapraz eksende hizalamak için kullanılan
align-self özelliğine bir göz atalım.
Bir satır halinde dizilmiş esnek bloklarımız olduğunu varsayalım.
align-items özelliğini center değerine ayarlayarak
onları dikey olarak ortaya hizalayalım, ikinci elemana ek olarak
elem sınıfı verelim ve onun için farklı bir hizalama belirleyelim,
örneğin onu üst kenara yaslayalım.
Bunun için, elem sınıfına sahip elemanımızın
align-self özelliğini flex-start
değerine ayarlayalım:
<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;
}
:
