CSS FLEX BOX YAPISI

Merhaba..

CSS ile yapılan tasarım yerleşimlerinde pek çok farklı yapı kullanılmaktadır. Tablolar ile yapılan tasarımalr , zamanla FLOAT özellikleri ile biçimlendirilmiş DIV'lere , sonraları da FLEX ve GRID yapılarına dönüşmüştür. Bu derste FLEX - BOX yapısına değinmeye çalışacağız.

FLEX BOX NEDİR?

Css'te çok kullanılan yerleşim yapılarından biri FLEX BOX yapısıdır. Esnek yerleşim modeli olarak ta adlandırılır.. Bu yapı ile tüm sayfanın yerleşimi esnek biçimde yapılabileceği gibi , sadece tek bir kapsayıcı içindeki elemanların yatay ve dikeyde kolayca yerleşimi sağlanabilir.

Bir elemanın flex kapsayıcı olabilmesi için DISPLAY özelliğine FLEX değerinin verilmesi gerekir.

.container { display : flex }

Flex yapıda , FLEX BOX (KAPSAYICI) ve FLEX ELEMANLAR olmak üzere 2 içerikten bahsedebiliriz.

FLEX BOX (KAPSAYICI) : FLEX özelliği verilmiş elemanlardır. CSS tüm elemanları bir kutu gibi gördüğünden, tüm elemanlara uygulanabilir.
FLEX ELEMANLAR : Flex kapsayıcı içerisindeki elemanlardır. Bir flex eleman ayrıca kendi içindeki elemanlar için flex kapsayıcı olabilir.

CSS

.kapsayici {
    display:flex;
    align-items:center;
    justify-content:center; 
}

Yukarıda hem yatayda hem dikeyde ortalanmış 4 tane flex elemana sahip bir FLEX kapsayıcı görünmektedir. Kapsayıcıya verilen sadece 3 CSS flex özelliği ile bu yerleşimi basitçe sağlamak mümkün olmaktadır.

NEDEN FLEX YAPI KULLANMALIYIZ?

Flex kapsayıcıya verilen özelliklerle , flex elemanların;

Aralarındaki boşluklar,
Yatay ve dikey hizalamaları ,
HTML sırasından bağımsız sıralanmaları ,
Esnek genişlik ve yükseklikleri ile responsive yerleşimleri

kolayca ayarlanabilir. Özelliklede yatay ve dikey ortalamalarda , daha önce kullanılan "float" ve "margin" işlemlerinde karşılaşılan güçlükleri ortadan kaldırmaktadır.