Can Kurtaran Css Özelliği Flexbox
Css3 ile hayatımıza giren flex ile sayfada bulunan elemanların istediğimiz yerde ve sıralamada yer almasını sağlamaktayız. Hazırsanız başlayalım.
Flexbox sistemini kullanabilmek için öncelikle içeride bulunan elemanların bir esnek kapsayıcısının olması gerekmekte. Bu adımları tamamladıktan sonra kapsayıcı altında yer alan tüm elemanlar esnetilebilir eleman(flexible item) olacaktır. Kapsayıcı elemanımıza css özelliği olarak; display:flex veya display:inline-flex verebilmekteyiz. Bu özellikler block ve inline ile aynı anlama gelmektedir.
Kurulumu yaptığımıza göre artık flex sisteminin özelliklerini inceleyebiliriz.
Flex Direction
Bu özelliğimiz kapsayıcı altındaki elemanların hizalanacağını yönü belirttiğimiz yerdir. Bu özelliğin varsayılan değeri yatay yöndedir. Değerleri ise aşağıdaki gibidir.
- row(default) → soldan sağa,
- row-reverse → sağdan sola,
- column → yukarıdan aşağı,
- column-reverse →aşağıdan yukarıya sıralamak için kullanılır.
Flex Wrap
Bu özelliğimiz alttaki elemanların tek satıra sığıp sığmayacağının ayarıdır. Çoklu satır yapmak isterseniz bu özelliği kullanmanız gerekmektedir. Değerleri ise aşağıdaki gibidir.
- nowrap(default) → tek satıra yerleştirmek için,
- wrap → elemanların sığmadığı durumda elemanları alt satıra aktarmak için,
- wrap-reverse → elemanların sığmadığı durumda ters şekilde sıralar.
Flex Flow
Bu özellik flex-direction ve flex-wrap özelliklerinin kısayolu olarak tanımlanmaktadır. flex-flow: column wrap;
Justify Content
Bu özellik ile alt elemanların yatay eksende dizilimi ile ilgili ayarlamaları yapmaktayız. Değerleri ise aşağıdaki gibidir.
- flex-start(default) → sola dayalı göstermek için,
- flex-end → sağa dayalı göstermek için,
- center → ortada göstermek için,
- space-between → elemanların ilk ve son elemanlarını sol-sağ sınırlara dayayıp eşit aralıklarla tüm elemanları yerleştirmek için,
- space-around → ilk ve son eleman hariç diğer elemanlar arasında eşit aralıklar ile yerleştirmek için,
- space-evenly → tüm elemanların arası aynı mesafede olması için kullanılır.
Align Items
Bu özellik ile alt elemanların dikey eksende dizilimi ile ilgili ayarlamaları yapmaktayız. Değerleri ise aşağıdaki gibidir.
- stretch(default) → hizalamada işlevi yoktur. Öğeleri kapsayıcıya göre uzatır,
- flex-start → yukarıdan aşağı sıralamak için,
- flex-end → aşağıdan yukarı sıralamak için,
- center → ortada göstermek için,
- baseline → öğelerin içerisindeki ilk satırı baz alıp ona göre hizalama işlemini yapar.
Align Content
Bu özellik ile çoklu satırda yer alan alt elemanların dikey hizalama ayarlarını yapmaktayız. Değerleri ise aşağıdaki gibidir.
- stretch(default) → elemanları hizalamayıp yükseklikleri uzatıp eşit hale getirmek için,
- flex-start → dikeyde başlangıca göre hizalamak için,
- flex-end → dikeyde sona göre hizalamak için,
- center → ortada göstermek için,
- space-between → ilk satırdaki elemanları başa ve son satırdakileri ise sona almak için (diğer elemanlar eşit aralıklarla hizalanır),
- space-evenly → satırlar arası eşit olması için kullanılır.
Bu özelliklerin tarayıcı uyumluluklarıyla alakalı daha kapsamlı bilgiyi linkten inceleyebilirsiniz.
Yukarıda belirttiğimiz tüm özelliklere aşina değilseniz pratik olarak kodunuzu oluşturabilmeniz için next.js ile bir proje geliştirdim. İhtiyaç duyduğunuz özellik için kodu otomatik olarak oluşturabilirsiniz. Linke tıklayarak projeyi inceleyebilirsiniz.
Bu makalede yararlandığım kaynaklar;
