CSS FLEX-BOX

CSS FLEX-BOX

Tarhi : 28-10-2018 12:16:48 | Yazar : ÇAĞLAR BOSTANCI

CSS Flex-Box Kullanımı

CSS FLEXBOX KULLANIMI

Merhaba, gün geçtikçe gelişen teknolojide internet siteler farklı ekranlarda ve boyutlarda görüntülenmektedir. Oluşturduğumuz sitelerin tasarım olarak her ekrana uyarlı olması gerekmekte ki bu şekilde kullanım kolaylığı sağlansın. Bu sebebten css flex özelliği bizlerin esnek şekilde kutular tasarlamamızı sağlamaktadır. Kutular her ekranda görüntülendiğinde kutu boyutları kendinden boyutlanarak içerisindeki nesnlerin kutuya göre boyutlandırmasını sağlamaktayız. Bu bize bir çok platformda sitemizi yayınlayabilir hale getiriyor. Tabi flex özelliğini en önemli sıkıntılarında biride eski versiyon tarayıcılarda çalışmıyor yani desteklenmiyor oluşudur. Bu sebepten bir kaç yıl öncesine kadar fazla tercik edilmiyordu. Tarayıcıler gün geçtikçe kendilerini güncellediler ve şuandaki güncel versiyon bir çok tarayıcı flex özelliğiniz desteklemektedir. Şimdi bunla ilk örneğimizi yapalım.

Css flex Kullanımı

Display: felx kullanımı belirtilen kutunun kapsayan içeriklerin flex yani esnek yapıda olacağını belirlemektedir. felx özelliği verilen nesne yatayda inline dikeyde ise block olarak nesne içerisinde yan yana gelirler.

Yukardaki örnekte bir tane main yani 3 tane div kapsayan ana div oluşturduk. Bu .main div klasında tanımlamış olduğumuz display:flex bu kutun ve kapsadığı elemanların flex yapısında olmasını tanımladı. div.main içerisindeki diğer üç tane div elemanı ise yükselik belirtmememize rağmen main ile aynı boyutta oldular. Yine farkettiyseniz div elementi block elment olmasına rağman inline element yapısında yan yana dizildiler.

Css flex Tanımlaması

Yukarıda oluşturmuş olduğumuz div.main elemetin kapsadığı elementlerin eşit bir şekilde yatay düzlemde dağılmasını istiyorsak main div altındaki elementlere flex:1; şeklinde tanımlamamız yeterlidir.

Css flex-basis Kullanımı

flex-basis kullanımı ile flex kutu içerisindeki elementlerin boyutlarını belirleyebiliyoruz. Aşağıdaki örnekte ilk kutunun boyutunu 40% vererek kutunun yüzde kırklık bir alan kaplamasını sağladık.

Css flex-direction Kullanımı

flex-direction oluşturduğumuz esnek kutuların yönünü belirlememizde kullanıyoruz. Aldığı değerler aşağıda sıralanmıştır.

DeğerAçıklama
rowSola yatay sıralı bir şekilde konumlanmasını sağlar
row-reverseSağa yatay sıralı bir şekilde konumlanmasını sağlar.
columnÜsten aşağı dikey sıralı bir şekilde konumlanmasını sağlar.
column-reverseAşağıdan yukarı dikey sıralı bir şekilde konumlanmasını sağlar.
initialVarsayılan şekilde sıralanmasını sağlar

Örnek için tıklayınız.

Css flex-grow Kullanımı

Esnek kutu modelinde nesnelerin bir birine oranlar ne kadar kat büyüklükte olacağını belirliyoruz.


Örnek için tıklayınız.

Css flex-shrink Kullanımı

Esnek kutu modelinde flex-shrink belirlenen oranda diğer nesnelerden küçük olmasını sağlıyor.


Örnek için tıklayınız.

Css flex-wrap Kullanımı

Esnek kutu içerisindeki nesnelerin dikeyde veya yatayda alt satıra inmeden sıralanmasını sağlar. Aynı zamanda bu sıralama ters istikamettede yapılmasını sağlamaktadır.


Örnek için tıklayınız.

Yukarıdaki örnekdeki ilk kutuda wrap özelliği kutuların aşağı düşmeden yan yana dizilmesini sağladı. İkinci örnekte ise verilen nowrap özelliği ile kutular belilenen genişliği geçtiğinde bir alt satıra inmektedir.Üçüncü kutudaysa verilen wrap-reverse ile kutu sıralaması aşağıdan yukarı doğru üst satıra çıkarak ilerlemektedir.

flex-box justify-content Kullanımı

Flex box esnek kutu modelinde nesnelerin yatayda ortalanmasını sağlmak için kullanılır. justify-content direktifi flex-start, flex-end, center, space-around, space-between, space-evenly değerlerini almaktadır. Aşağıdaki örnekte bu konuyu daha iyi kavramanız için örnek bi uygulama bulunamaktadır.


Örnek için tıklayınız.

flex-box align-content Kullanımı

justify-content ile nesneleri yatayda hizalarken align-content ile de nesnelerin dikeyde hizalanmasını sağlıyoruz. aling-content flex-start, center, flex-end, space-around, space-between, space-evenly, stretch gibi değerler almaktadır.


Örnek için tıklayınız.

flex-box align-items Kullanımı

Flex-box kullanımında son olarak align-items kullanımı öğreneceğiz. Nesneleri kendi içerisinde yatay düzlemde, dikey hizalamak için kullanmaktayız. align-content direktifi flex-end, flex-start, center, baseline, stretch gibi değerler almaktadır.


Örnek için tıklayınız.

Evet bunuda öğrendiğimize göre alıştırma yaparak konuyu pekiştirmemiz gerekmektedir. Aşağıda sizin için hazırlamış olduğum flex-box uygulamasını kullanarak öğreniminizi kolaylaştırabilirsiniz.

FLEX-BOX UYGULAMASI İÇİN TIKLAYINIZ.