Jump to content
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • entries
    53
  • comments
    0
  • views
    1,341

CSS'de align-self özelliği ve TailwindCSS Sınıfı Karşılığı


Doğuhan ELMA

45 views

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:

Class
Properties
self-auto align-self: auto;
self-start align-self: flex-start;
self-end align-self: flex-end;
self-center align-self: center;
self-stretch align-self: stretch;
self-baseline align-self: baseline;

 

1.png

1.png

 

 

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...