Css flex özellikle karmaşık yerleşimde bulunan web sitelerinde işinize fayda katacaktıktır.Css display; flex geçmişi 2009 yılına dayanan 2 kez yenilenme geçirmiş son kesin süeümü 2012 yılında oluşan yapısal düzenleme özelliğidir. Yani sitenin yapsının şekillenme özelliğidir. Site içerinsinde ki araçları yatay ve dikey de kolaylıkla düzenlemek ve hizalamak için kullanılabilecek en iyi css yöntemi.
Flex Yapısının Artıları:
– Flex esnek bir yapı oluşturacağından responsive geçmek daha kolay aşamalı olacaktır.
– İçerikleri sağa sola kaydırırken float kullanmanıza gerek duyulmayacaktır. Bu da sitenin yapısının bozulmasını engelleyecektir.
– Elamanların boyutlarını rahatlıkla istediğiniz şekilde ayarlayabileceksiniz.
– Dikey de ortalama ve eşit şekilde düzenlemek bu özellikte kolay şekilde yapılabilmektedir.
Flex Yapısının Eksileri:
– Tarayıcıdan gelen destek istenilen aşamaya gelmemiştir.
-Kişiden kişiye değişkenlik göstermekle birlikte flex yapısını anlamak biraz zaman alabilir.
Kullanımı:
Flex, bir kapsayıcı elaman niteliğindedir ve elamana ait iç elamanlarla etkileşim halindedir. Flex display özelliğinin parametresi şeklinde kullanılır. Flex’i uygulamaya koyabilmek için bir tane kapsayıcı elaman ve ona ait iç elemanlarımız olması gerekli ve bunlara farklı parametreler yada özellikler uygulanıyor.
Felx Kapsayıcı Özellikleri
Display:flex
Elamanın görünüm özelliği flex olarak belirtilmesi gerekiyor. Aynı block veya inline elementleri gibi, flexin kendi özelliklerini yapabilmesi bu önemli bir husustur. Bu elaman artık kapsayıcı eleman niteliğini taşıyor.
flex – direction
Flex kapsayıcısın içerisindeki elemanları yatay ve dikey olarak eşit şekilde hizalanmalarını sağlayan özellik niteliğindedir. Varsayılan olarak row kullanılır.
flex-wrap
Kapsayıcı içerisindeki elemanların, sınır genişliğini aştığında aynı satırda devam mı edeceklerini yoksa bi alt kademeye mi geçeceklerini belirtir.
flex-flow
Bu parametre flex-diretion ve flex-wrap özelliklerini birlikte işlenmesini sağlar.
justify-content
Kapsayıcı içerisindeki araçların yatay eksende nasıl ayarlanacağını belirler.
align-items
justify-conent özelliğinin tam tersi olarak düşünülebilir. Kapsayıcı içerisindeki elamanları dikey eksende nasıl ayarlanacağını belirler.
align-content
Kapsaycı içerisindeki birden fazla satırdaki elamanları dikeyde hizalamayı sağlar