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.  

Yorumlar

Bu blogdaki popüler yayınlar

HTML progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS text-justify Özelliği

CSS justify-content Özelliği

CSS overflow Özelliği

HTML5 Canvas Oyun Yapımı Dersleri

CSS top Özelliği