CSS flex-direction Özelliği

CSS flex-direction

Css flex-direction özelliği ile esnek kutu içerisindeki elemanları

• Yatay olarak ,kodlanan sıralama yönünde(soldan sağa)
• Yatay olarak ,kodlanan sıralamanın tersi yönünde(sağdan sola)
• Düşey olarak ,kodlanan sıralama yönünde(yukarıdan aşağıya)
• Düşey olarak ,kodlanan sıralama tersi(aşağıdan yukarıya)

sıralamak için kullanılır.

Örnek:

Bu örnekte flex-direction özelliğine flex-direction: column değeri verildiği için anakutu içerisindeki divelemanları düşey düzlemde ve kodlanan sıramalaya uygun olarak oluşturuldu.

#anakutu { width: 300px; height: 300px; border: 2px solid gray; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; } #anakutu div { width: 35px; height: 35px; color: white; font-size: 1.5em; text-align: center; }

CSS flex-direction nedir nasıl kullanılır

Esnek kutu içersindeki div elemanlarını istenilen doğrultu/yönde sıralamak için kullanılan özelliktir.

CSS flex-direction	CSS flex-direction özellikleri
Varsayılan Değer:	row
Kalıtsallık:	yok
Animasyon Özelliği:	yok
Versiyon:	CSS3
JavaScript flex-direction:	object.style.flexDirection="row-reverse"

CSS flex-direction Tarayıcı Desteği

CSS Kodu:
flex-direction	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

CSS flex-direction Değerleri

flex-direction:row|row-reverse|column|column-reverse|initial|inherit;

CSS flex-direction özelliği değerleri

CSS flex-direction değerleri	CSS flex-direction değerleri tanımları	CSS örnek uygulamalar
row	Satır olarak soldan sağa sıralar
row-reverse	Satır düzeyinde ve sağdan sola doğru sıralar.
column	Düşey olarak yukarıdan aşağıya kodlanan sırayla elemanları görüntüler.
column-reverse	Düşey olarak kodlamanın tersi yönde sıralayarak görünüm oluşturur.
initial	Varsayılan başlangıç değerini alır.
inherit	Soybağından gelen değeri kulanır.