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:

html<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>

css.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;
}

Результат: