CSS FLEX-BOX

CSS FLEX-BOX

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

CSS Flex-Box Kullanımı

Merhaba, bu yazımda sizlere flex box; diğer adıyla esnek kutu modelinin nasıl kullanıldığını anlatacağım. Bu model genel olarak bakıldığında Bootstrap’daki col- yapısına benzemektedir. Ana div’in yani kapsayan div’in genişliğini ekrana oranla (%) olarak verirseniz, div’lerin boyutları ekrana oranla boyutlanacaktır.

Örneğin yan yana konulacak dört adet divmizin olduğunu düşünürsek bunların boyutlandırmalarını ve sıralamalarını flex-box ile rahatlıkla verebilmekteyiz. Şuan kullanmış olduğumuz çoğu tarayıcı flex-box’ı desteklemektedir. Sadece bazı tarayıcılar için ön tanımlamalar yapmamız gerekmektedir. Bu ön tanımlamalar kodların başına getirlimektedir. box-flex kodu için -ms-box-flex (İnternet Explorer) -webkit-box-flex (Chrome ve Safari) -moz-box-flex (Mozilla) şeklinde belirtilirken opera ise normal kodlamayı desteklemektedir (box-flex). Öncelikle kodların hangi amaç için kullanıldıklarını açıklayalım sonra ise farklı öreneklerle pekiştirelim.

 

 

Box-flex 1,2,3 gibi rakamalar alarak anadivin boyutuna göre belirtilen divin boyutunun oluşmasını sağlamaktadır. bootstrap’tai col-sm-1, col-sm-2 gibi
box-orient Kutuların yan yana(Horizontal) veya al alta (vertical) olarak hizalanmalarını sağlar. Vertical, Horizantal, Inline-axis, block-axis değerlerini almaktadır.
box-ordinal-group Yan yana veya alt alta dizilmesini istediğiniz kutuların sırasını belirlemede kullanmaktayız. Değer olarak numeric 1,2,3,5 gibi değer almaktadır. Dikkat edilmesi gereken husus Opera tarayıcısı için order kullanılırken İnternet Explorer 10 için box-ordinal olarak desteklenmektedir
box-pack Kutuların ana kutu içerisindeki nasıl yaslanacaklarını belirler. Örneğin alt alta dizilmesini istediğiniz (vertical) kutuların anadiv içerisinde başa yaslamak için (start) ortadaya yaslamak için (center) sağda yaslamak için (end), iki yana yaslı olarak ise (Justify) değerlerini vermeniz gerekmektedir.
box-aling Kutuların anadiv içerisindeki konumlarını belirlemek için kullanılır. Box-orient ile belirlemiş olduğunuz (horizontal-vertical) değere göre divlerini hizalanmasını sağlar. Sola hizalamak için (start) ortada hizalamak için (center) sağda hizalamak için (end) gibi değeler alır. Varsayılan strect’tir baseline değeride kullanılmaktadır.

örn1: Tüm tarayıcılarda çalışacak şekilde planlandı.
index.html:

style.css:

Ekran Çıktısı

orn2:
Vertilcal olarak kullanımı aşağıdaki gibidir. Aynı zamanda box-flex içinde örnek verebiliriz. Kodları karşılaştırdığınızda yukarıki kodlardan tek fark hizlama olarak yukarıdan aşağı (box-orient:vertical) belirledik ve kutuların ilkini daha geniş tuttuk (box-flex:3).

index.html:

 

style.css:

Ekran Çıktsı

Reklam Alanı