Justify-content
justify-content ile ana eksen hizalamayı öğrenirsin.
justify-content nedir?
justify-content, esnek öğeleri ana eksen boyunca nasıl dağıtacağımızı söyleyen bildirimdir. Yatay bir kapsayıcıda öğeler sola, sağa, ortaya ya da eşit aralıklarla dizilebilir; dikey kapsayıcıda ise üste, alta.
Yaygın değerler: flex-start, flex-end, center ve space-between. Bu ders dördünü de ele alıyor.
flex-start, flex-end, center
Üç temel hizalama: flex-start öğeleri ana eksenin başına (soldan başlıyorsa sol) yığar; flex-end sonuna (sağ) yığar; center ortaya toplar.
Örneğin bir araç çubuğunda düğmelerin ortaya gelmesini istiyorsan justify-content: center yazarsın. Üçü de hizalama yerini değiştirir; öğeler arası boşluğu eşitlemez. Eşit boşluk için bir sonraki karta bak.
space-between ile araç çubuğu
space-between öğeleri ana eksen boyunca eşit aralıklarla yayar; ilk öğe başta, son öğe sonda, kalanlar aralarında eşit boşlukla.
Bu değer, başlığı solda ve menüyü sağda tutan bir araç çubuğu (toolbar) için birebirdir. İki uç otomatik yapışır, ortadakiler eşit dağılır. Bu davranış modern web uygulaması başlıklarında çok yaygındır.
Uygulama Araç çubuğunu iki yana yay
Bir .toolbar sınıf seçicisi ekle. İçine display: flex ve justify-content: space-between bildirimlerini yaz. Böylece baştaki logo ile sondaki menü arası eşit boşlukla açılır.
Örnek çözümü göster
/* araç çubuğunu iki yana yay */
.toolbar {
display: flex;
justify-content: space-between;
}Kendini test et
-
Hangisi justify-content değeridir?
.menu { display: flex; justify-content: ?; }- row
- column
- flex-end
- stretch
Cevabı göster
flex-end — Doğru. flex-end, justify-content için geçerli bir değerdir; öğeleri ana eksenin sonuna yığar.
-
Araç çubuğunu iki yana yay
.toolbar { display: flex; justify-content: ____; }Cevabı göster
.toolbar { display: flex; justify-content: space-between; } -
justify-content değerlerini eşleştir
- flex-start
- Başa yığar
- flex-end
- Sona yığar
- center
- Ortaya toplar
- space-between
- Eşit aralık yayar