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 yorum etiketi ile öğe gizleme örneği

HTML Resimler

YouTube Reklam Engelleyici

Javascript ile neler yapılabilir

Html belgesi yapısını anlama uygulaması

Html5 canvas animasyon dersleri Javascript Yilan Oyunu

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript