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önder