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

Javascript Oyun Yapma Dersleri HTML5+CSS3

YouTube reklamları nasıl engellenir

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

Uyurken Bile Para Kazanmak İster misin

Html belgesi yapısını anlama uygulaması

Web Sitenizden Çok Para Kazanin

HTML area Etiketi

HTML satırsonları ve boşlukları koruma Örnek

Javascript ile neler yapılabilir

HTML Tablo Örneği