CSS'de align-self özelliği, Flexbox veya Grid konteyneri içindeki bireysel öğelerin, çapraz eksen (cross axis) boyunca nasıl hizalanacağını kontrol eder. Bu özellik, align-items özelliğinin belirlediği varsayılan veya genel çapraz eksen hizalamasını geçersiz kılar ve yalnızca özelliği uygulanan öğe üzerinde etkilidir.

align-self özelliği, Flexbox ve Grid düzenlerinde kullanılabilir ve aşağıdaki değerleri alabilir:

auto: Öğe, konteynerinin align-items özelliğine göre hizalanır (varsayılan değer).

flex-start: Öğe, konteynerin çapraz ekseninin başlangıç kenarına hizalanır.

flex-end: Öğe, konteynerin çapraz ekseninin bitiş kenarına hizalanır.

center: Öğe, konteynerin çapraz ekseninde ortalanır.

baseline: Öğe, konteynerdeki diğer öğelerin metin satırının taban çizgisine göre hizalanır.

stretch: Öğe, konteynerin çapraz eksenini tamamen kaplayacak şekilde uzanır (eğer öğenin yüksekliği veya genişliği sabitlenmemişse).

Flexbox için align-self kullanım örneği:

.item {
  align-self: center; /* Bu özel öğeyi çapraz eksende ortalar */
}

Grid için align-self kullanım örneği:

.item {
  align-self: stretch; /* Bu özel öğeyi grid alanının tam yüksekliğine uyacak şekilde uzatır */
}

align-self özelliği, farklı boyutlardaki veya içeriğe sahip öğelerin, genel konteyner hizalamasından bağımsız olarak bireysel olarak hizalanmasını sağlamak için çok yararlıdır. Bu sayede daha esnek ve duyarlı web tasarımları mümkün olur.

TailwindCSS: