Kayıtlar

flex-direction etiketine sahip yayınlar gösteriliyor

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 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; } Kendiniz deneyin » CSS flex-direction nedir nasıl kullanılır Esnek kutu içersindeki div ele

CSS flex-direction uygulama

CSS flex-direction div {<br>    display: flex;<br>    flex-direction:<span id='rfrnscsscde'> row</span>;<br>}<br> CSS flex-direction değerleri row row-reverse column column-reverse initial Sonuç Ekranı 1 2 3 4 5 Sonuçları görmek için değerlerin üzerine geliniz. HtmlveCSSEğitimi.blogspot.com

JavaScript CSS flex-direction Örnek

javascript css flex-direction özelliği örnek uygulama h t m l c s s Javascript ile flex-direction özelliğine "row-reverse" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("anakutu").style.flexDirection = "row-reverse" document.getElementById("anakutu").style.WebkitFlexDirection = "row-reverse"; } Çalıştır JavaScript css flex-direction © htmlvecssegitimi.blogspot.com

CSS flex-direction Örnek

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE HTML><html lang="en-US"> <head> <meta charset="UTF-8"> <title>css flex-direction özelliği ve örnek uygulama</title> <style> #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; } </style></head> <body> <div id="anakutu&quo