Ö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