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

Sıradaki ders: Flex-wrap

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler