Flex-direction
flex-direction ile ana eksen yönünü öğrenirsin.
flex-direction nedir?
flex-direction, esnek kapsayıcının çocuklarını hangi yönde dizeceğini belirler. İki temel değer var: row yan yana, soldan sağa dizer; column alt alta, yukarıdan aşağı dizer. Varsayılan değer row'dur; yani display: flex yazdığında öğeler otomatik olarak yan yana dizilir.
Seçtiğin yön, kapsayıcının ana eksenini belirler.
Ana eksen ve çapraz eksen
Her esnek kapsayıcının iki ekseni vardır: ana eksen (main axis) ve çapraz eksen (cross axis). flex-direction: row seçtiğinde ana eksen yataydır; flex-direction: column seçtiğinde dikey. Çapraz eksen, ana eksenin dik yönüdür.
Yönü seçtiğinde, sonraki derslerin hizalama ayarları bu eksenlere göre çalışır.
column ile dikey menü
Bir column kapsayıcı, dikey menüler ve kart sıraları için idealdir. Bir nav öğesini esnek kapsayıcı yapıp flex-direction: column yazarsan, bağlantılar alt alta dizilir; bu, kenar menüsü görüntüsü verir.
Yan yana bir menü isteseydin row kullanırdın. Aynı iki menü, yalnızca yön bildirimiyle bambaşka görünür.
Uygulama Kenar menüsünü dikey yap
Bir .sidebar sınıf seçicisi ekle ve içine display: flex ile flex-direction: column bildirimlerini yaz. Böylece kenar menüsü bağlantıları alt alta dizilir.
Örnek çözümü göster
/* kenar menüsünü dikey yap */
.sidebar {
display: flex;
flex-direction: column;
}Kendini test et
-
flex-direction: row ne yapar?
.menu { display: flex; flex-direction: row; }- Öğeleri alt alta dizer
- Öğeleri yan yana dizer
- Öğeleri gizler
- Öğeleri ortaya toplar
Cevabı göster
Öğeleri yan yana dizer — Doğru. row öğeleri yan yana, soldan sağa dizer.
-
Dikey menü için yön değerini yaz
nav.menu { display: flex; flex-direction: ____; }Cevabı göster
nav.menu { display: flex; flex-direction: column; } -
Yön değerlerini eşleştir
- row
- Yan yana dizer
- column
- Alt alta dizer
- flex-direction
- Yön bildirimi