Yayınlar

flex-wrap etiketine sahip yayınlar gösteriliyor

CSS flex-wrap Özelliği

CSS flex-wrap Css flex-wrap özelliğini kullanarak esnek kutu içerisindeki html elemanlarının kaydırılma işlemi gerçekleştirilir. Örnek: Bu örnekte 1'den 6'ya kadar sıralanmış kutulara flex-wrap: wrap-reverse özelliği ve değeri verildiğinde kutular hem aşağıya kaydırılacak hemde ilk üç kutu ile alttaki üç kutu sıralama olarak yer değiştirecektir. #anakutu { width: 150px; height: 150px; border: 1px solid #c5c5c5; display: -webkit-flex; -webkit-flex-wrap: wrap-reverse; display: flex; flex-wrap: wrap-reverse; } Kendiniz deneyin » CSS flex-wrap nedir nasıl kullanılır Flex-wrap özelliğini office programlarından word'teki sözcük kaydırma özelliğine benzetebilirsiniz. Bu kelimenin yanına reverse geldiğinde ise tersten bu işlemi gerçekletireceğini unutmayınız. CSS flex-wrap CSS flex-wrap özellikleri   Varsayılan Değer: nowrap   Kalıtsallık: yok  

CSS flex-wrap uygulama

CSS flex-wrap #anaktck {<br>    width:150px;<br>    height: 300px;<br>    border:1px solid black;<br>    display: flex;<br>    flex-wrap:<span id='rfrnscsscde'> nowrap</span>;<br>}<br> CSS flex-wrap değerleri nowrap wrap wrap-reverse initial Sonuç Ekranı 1 2 3 4 5 6 Sonuçları görmek için değerlerin üzerine geliniz. HtmlveCSSEğitimi.blogspot.com

JavaScript CSS flex-wrap Örnek

javascript css flex-wrap özelliği örnek uygulama Javascript ile flex-wrap özelliğine "nowrap" 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.flex-wrap } Çalıştır JavaScript css flex-wrap © htmlvecssegitimi.blogspot.com

CSS flex-wrap Ö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> <head> <meta charset="utf-8" /> <style> #anakutu { width: 150px; height: 150px; border: 1px solid #c5c5c5; display: -webkit-flex; -webkit-flex-wrap: wrap-reverse; display: flex; flex-wrap: wrap-reverse; } #anakutu div { width: 50px; height: 50px; } </style></head> <body> <div id="anakutu"> <div style="background-color:red;">1</div> <div style="background-color:green;">2</div> <div style="background-color:blue;">3</div> &