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

Sıradaki ders: Align-items

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler