CSS flex-direction Ö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-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"> <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-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>

<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-direction Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML yorum Etiketi Örnek

HTML Yorumlar

HTML section Etiketi

CSS font-size-adjust Özelliği

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

HTML main Etiketi

HTML embed Etiketi

YouTube reklamları nasıl engellenir

HTML b Etiketi

YouTube Reklam Engelleyici