CSS flex-flow Örnek

Kasım 30, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css flex-flow özelliği ve örnek uygulama</title> <style> #anakutu { width: 210px; height: 300px; border: 2px dotted black; display: -webkit-flex; -webkit-flex-flow: row-reverse nowrap; display: flex; flex-flow: row-reverse nowrap; } #anakutu div { width: 30px; height: 30px; color:white; font-size:1.5em; text-align:center; } </style> </head> <body> <div id="anakutu"> <div style="background-color:red;">e</div> <div style="background-color:green;">r</div> <div style="background-color:blue;">e</div> <div style="background-color:pink;">n</div> <div style="background-color:gray;">c</div> <div style="background-color:brown;">s</div> <div style="background-color:aqua;">s</div> </div> <p><b>Hatırlatma:</b> Internet Explorer 10 ve öncesindeki versiyonları bu özelliği desteklemiyor.</p> <p><b>Hatırlatma:</b> Safari 6.1 ve sonrasındaki versiyonlarında -webkit takısı ile birlikte kullanılabilir.</p> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>css flex-flow özelliği ve örnek uygulama</title>
  <style>
    #anakutu {
        width: 210px;
        height: 300px;
        border: 2px dotted black;
        display: -webkit-flex;
        -webkit-flex-flow: row-reverse nowrap; 
        display: flex;
        flex-flow: row-reverse nowrap;
    }
    
    #anakutu div {
        width: 30px;
        height: 30px;
    	color:white;
    	font-size:1.5em;
    	text-align:center;
    }
  </style>
</head>

<p><b>Hatırlatma:</b> Internet Explorer 10 ve öncesindeki versiyonları bu özelliği desteklemiyor.</p>

<p><b>Hatırlatma:</b> Safari 6.1 ve sonrasındaki versiyonlarında -webkit takısı ile birlikte kullanılabilir.</p>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS flex-flow Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML DOCTYPE Bildirimi

Javascript ile neler yapılabilir

Html belgesi yapısını anlama uygulaması

HTML5 ile SEO Uyumlu İçerik Üret

Web Sitenizden Çok Para Kazanin

Javascript kodları nereye yazılır

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır

Uyurken Bile Para Kazanmak İster misin

YouTube reklamları nasıl engellenir

Javascript Oyun Yapma Dersleri HTML5+CSS3