flexbox.png-cahitsoyman.blogspot.com-Flexbox Web Sitesi Yapımı
Bu makalede Css3 Flexbox (Esnek Kutu) ile bir web sitesi temasının nasıl yapıldığını anlatmaya çalışacağım.

Css3 Flexbox (esnek kutu) modülü çıkmadan önce sayfa yerleşimlerini position ve float özelliklerini kullanarak yapıyorduk.

Daha önce; dikey eksende sayfa düzeni yerleştirmelerinde yaşadığımız sorunlar, Css3 ün getirdiği Flex özelliği ile kolaylaştırılmıştır.

Böylece kapsayıcı elemana tanımlanan flex fonksiyonu ile sayfa yerleşimi çok daha kolaylaşmıştır. Bu sayede artık position ve float özelliklerini kullanmadan kapsayıcı eleman içinde ki öğelerin yerleşimlerini kolayca yapabiliyoruz.


Css de ki sayfa yerleşimlerinde ki karşılıklığı önlemek; özellikle position ve float özelliklerinde ki karmaşadan kurtulmak için Css3 de Flexbox (Esnek kutu) modeli getirilmiştir.

Bu durum, özellikle dikey eksende ki sayfa ortalama ve yerleştirmelerinde büyük kolaylık sağlamıştır.

Böylece kapsayıcı bir eleman içinde ki alt elemanların esnek bir şekilde yerleşimi sağlanmıştır.

 İlerleyen günlerde bu konuda daha başka örnekler de verilecektir.

Şimdi flex fonksiyonu kullanılarak basit bir web sitesi örneğinin nasıl yapıldığını anlatmaya başlıyalım.

Kaynak Kodları: İNDİR

Anlatımın bundan sonra ki bölümünü aşağıda ki videodan veya youtube kanalından takip edebilirsiniz.