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

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

HTML s Etiketi

Html dersleri

Uyurken Bile Para Kazanmak İster misin

HTML figure Etiketi

HTML5 ile SEO Uyumlu İçerik Üret

HTML rt Etiketi

Html belgesi yapısını anlama uygulaması

YouTube reklamları nasıl engellenir

Basit Bir HTML Belgesi Örnek