Align-items
align-items ile çapraz eksen hizalamayı öğrenirsin.
align-items nedir?
align-items, esnek öğeleri çapraz eksen boyunca hizalar. Yatay bir kapsayıcıda ana eksen yatay, çapraz eksen dikeydir; yani align-items öğeleri dikeyde hizalar.
Yüksekliği farklı düğmelerin alttan, üstten ya da ortadan hizalanmasını bu bildirimle ayarlarsın. Yaygın değerler: stretch, center, flex-start ve flex-end.
stretch değeri
stretch, öğeleri çapraz eksen boyunca uzatarak kapsayıcının boyunu doldurmasını sağlar. Bir row kapsayıcıda yüksekliği farklı üç kart varsa, align-items: stretch hepsini en uzun kartın yüksekliğine çıkarır.
Bu, kart sıralarında düzgün bir görünüm için idealdir. Öğelerin kendi yükseklik bildirimi varsa stretch etkisiz kalır.
flex-start, flex-end, center
flex-start öğeleri çapraz eksenin başına (yatay kapsayıcıda üste) yığar; flex-end sonuna (alta) yığar. Bir araç çubuğunda düğmelerin alttan hizalanmasını istiyorsan align-items: flex-end yazarsın.
center ise öğeleri dikeyde ortalar. Bu üç değer, kapsayıcı yüksek olduğunda dikey hizalamayı belirler; kapsayıcı kısaysa görsel etkileri azdır ve seçim daha az önem taşır.
Uygulama Araç çubuğunu dikeyde ortala
Bir .toolbar sınıf seçicisi ekle. İçine display: flex ve align-items: center bildirimlerini yaz. Böylece farklı yükseklikteki düğmeler dikeyde ortalanır.
Örnek çözümü göster
/* araç çubuğunu dikeyde ortala */
.toolbar {
display: flex;
align-items: center;
}Kendini test et
-
align-items neyi hizalar?
.toolbar { display: flex; align-items: center; }- Yalnızca metni
- Ana eksen boyunca
- Sayfanın köşesine
- Çapraz eksen boyunca
Cevabı göster
Çapraz eksen boyunca — Doğru. align-items çapraz eksen boyunca hizalar; yatay kapsayıcıda dikey hizalama yapar.
-
Düğmeleri dikeyde ortala
.toolbar { display: flex; align-items: ____; }Cevabı göster
.toolbar { display: flex; align-items: center; } -
align-items değerlerini eşleştir
- stretch
- Öğeleri uzatır
- center
- Dikeyde ortalar
- flex-start
- Üste yığar
- flex-end
- Alta yığar