Yaklaşık bir hafta önce flex hakkında Bursa’da Girişimci Engelliler Derneği’nin davetlisi olarak bir seminere gittim. Seminer çok güzel geçti. Seminer için Bülent Sakarya ve Samet Şahin’e teşekkürler. Seminere katılan arkadaşlara bir şeyler anlatmak için hazırlanırken ben bir şeyler öğrendim. Bu makalede bunları sizlerle paylaşacağım.
https://t.co/pxYirymXug'dan Fatih Hayrioğlu CSS Flex anlatıyor. pic.twitter.com/u8DyNAe3jg
— Bülent Sakarya (@bulentsakarya) 27 Ocak 2018
Flex’in bize kazandırdığı en güzel özelliklerden birisi de hizalama özellikleri. Burada anlatacağım konu flex ile margin tanımının auto değerinin birlikte kullanımı ile ortaya çıkan süper bir özellik.
zingat.com‘dan bir örnek ile bu konuyu anlatmaya başlıyayım. Yukarıda gördüğünüz sonucu normal float ile oluşturmak için bazı değişiklikler yapmak gerekiyor. Örneğin ikonları sahte elemanlarda kullanmak zorunda olmamız gibi. Flexi le bunu yapmanın kolay bir yolu var.
Kapsayıcı elemana flex tanımı yaptığımızda ögelerin her birini yan yana dizildi. Bizim istediğimiz ise harita (map) ikonu ve kilometre bilgisini sağa tarafa hizalaması. Burada ortaya margin-left: auto; ile ikon ve yazıyı sağ tarafa hizalıyoruz. Daha doğru bir tanım ile harita ikonunun sol yanını autoya çekiyoruz.
Sonuç istediğimiz gibi. Bunu tek satır css kodu ile yaptık.
Aynı mantıkla başka bir örnek yapalım. Örneğimizde bir menü yaptığımızı düşünelim. Seminerde twitter menüsünü örnek vermiştim. Örneği burada da paylaşayım.
Kodun can alıcı kısmı
.twitter {
margin-left: auto;
margin-right: auto;
}kısmıdır. Flex ile sıraladığımız menü elemanlarından twitter sınıfı tanımlı olanı ortada kalan boşlukta ortalamak için sadece iki satır kod yazdık. :)
Dikey örnekler
Dikeyde benzer örnekler yapabiliriz. Zamanında uğraştığım için iyi biliyorum. livego’da çalışırken sol menü yapımında bu tip bir kod çok ihtiyaç duymuştum. Çok ciddi zamanımı almıştı sol ve sağ kolonlar.
Şimdi aynı sonucu elde etmek sadece iki satır kod.
Menü yüksekliğini ekran yüksekliğine eşitlemek için height: 100vh verdik. Yatayda kullandığımız gibi ilgili ögenin (.add-account) margin değerini auto yaptık. Bu sefer alta hizalamak için margin-top: auto tanımladık.
Bu yöntemi birçok yerde kullanabiliriz. Süper bir kazanım.
Kalın sağlıcakla.