Align-self
align-self ile tek öğenin hizalamasını öğrenirsin.
align-self nedir?
align-self tek bir flex ögesinin çapraz eksen hizalamasını değiştirir. Kapsayıcının align-items değerini geçersiz kılar. Böylece bir öge farklı hizalanırken diğerleri aynı kalır.
Değerleri şunlardır: auto, flex-start, flex-end, center, baseline, stretch. Varsayılan auto'dur ve kapsayıcının değerini miras alır.
align-self değerleri
Her değer farklı bir hizalama yapar. flex-start ögeyi çapraz eksenin başına, flex-end sonuna koyar. center ortalar, stretch ögeyi çapraz eksende uzatır.
baseline ögeleri metin taban çizgisine göre hizalar; farklı boyutlu yazı tiplerinde işe yarar. Bir araç çubuğunda düğmeleri taban çizgisine dizmek idealdir.
Uygulama Rozeti çapraz eksende ortala
Bir .badge ögesini çapraz eksende ortaya al. .toolbar kapsayıcısına dokunma; yalnızca .badge için align-self: center ekle.
Örnek çözümü göster
/* rozeti ortala */
.badge {
align-self: center;
}Kendini test et
-
align-self özelliğinin varsayılan değeri nedir?
- flex-start
- stretch
- center
- auto
Cevabı göster
auto — Doğru. align-self varsayılanı auto'dur; kapsayıcının align-items değerini miras alır.
-
align-self: center bildirimini yaz
.cta { ____: center; }Cevabı göster
.cta { align-self: center; } -
Her değeri hizalamasına eşle
- flex-start
- Çapraz eksen başı
- flex-end
- Çapraz eksen sonu
- center
- Çapraz eksende ortala
- stretch
- Çapraz eksende uzat