Özet - Yatay menü

Flexbox ile yatay menü ve araç çubuğu kurarsın.

Yatay menü özeti

Bu özette Flexbox'ın temel bildirimlerini bir araç çubuğunda birleştiriyoruz. Önce display: flex ile kapsayıcıyı esnek yaparız. flex-direction: row ile yan yana dizeriz.

justify-content: space-between baştaki logo ile sondaki menüyü iki yana yayıp ortadakilere eşit boşluk verir. align-items: center dikeyde ortalar. flex-wrap: wrap dar ekranda satır atlamayı açar.

Boşluk ve hizalama birlikte

Araç çubuğunda iki boyutta hizalama yaparsın: ana eksen için justify-content, çapraz eksen için align-items. Yatay bir kapsayıcıda justify-content: space-between yatayda iki yana yayarken, align-items: center dikeyde ortalar.

İkisini birlikte kullanmak, modern başlık çubuklarının standart kurgusudur; logo solda, menü sağda, düğmeler hizalı durur.

Uygulama Yatay menüyü kur

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ü iki yana yayılır.

Örnek çözümü göster

/* yatay menüyü kur */
.toolbar {
  display: flex;
  justify-content: space-between;
}

Uygulama Araç çubuğunu kur ve ortala

Yine bir .toolbar sınıf seçicisi ekle. Bu kez içine display: flex, justify-content: space-between ve align-items: center bildirimlerini yaz. Böylece araç çubuğu hem iki yana yayılır hem dikeyde ortalanır.

Örnek çözümü göster

/* araç çubuğunu kur ve ortala */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Kendini test et

Hangisi öğeleri yan yana dizer?
```
.toolbar {
  display: flex;
  /* ? */
}
```
- flex-direction: column
- flex-direction: row
- flex-wrap: nowrap
- align-items: stretch
Cevabı göster

flex-direction: row — Doğru. flex-direction: row öğeleri yan yana, soldan sağa dizer.
Özellikleri işlevleriyle eşleştir

display: flex

Kapsayıcıyı esnek yapar
justify-content

Ana eksende dağıtır
align-items

Çapraz eksende hizalar
flex-wrap

Satır atlamayı açar

Sıradaki ders: Flex-grow

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler