CSS flex-direction Özelliği
CSS flex-direction
Cssflex-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)
Örnek:
Bu örnekteflex-direction
özelliğine flex-direction: column
değeri verildiği için anakutu içerisindeki div
elemanları 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;
Yorumlar
Yorum Gönderme