CSS flex Ö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 özelliği ve örnek uygulama</title> <style> #anakutu { width: 180px; height: 250px; border: 2px solid gray; display: -webkit-flex; display: flex; } #anakutu div { -webkit-flex: 1; -ms-flex: 1; flex: 1; } </style> </head> <body> <div id="anakutu"> <div style="background-color:red;">K</div> <div style="background-color:green;">M</div> <div style="background-color:blue;">Y</div> <div style="background-color:yellow;">S</div> <div style="background-color:pink;">P</div> <div style="background-color:brown;">K</div> </div> <p><b>Hatırlatma</b> Internet Explorer 9 ve öncesindeki versiyonlar bu özelliği desteklemiyor..</p> <p><b>Hatırlatma</b> Internet Explorer 10 versiyonlarında -ms ön eki getirilmeli fakat 11.0 sürümüyle birlikte artık ön takı kullanmayabilirsiniz.</p> <p><b>Hatırlatma</b> Safari 6.1 ve yeni versiyonlarında -webkit ön takısı getirilerek kullanılabilir.</p> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

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

<head>
  <meta charset="UTF-8">
  <title>css flex özelliği ve örnek uygulama</title>
  <style>
    #anakutu {
        width: 180px;
        height: 250px;
        border: 2px solid gray;
        display: -webkit-flex; 
        display: flex;
    	
    }
    
    #anakutu div {
        -webkit-flex: 1;  
        -ms-flex: 1;    
        flex: 1;
    }
  </style>
</head>

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

<p><b>Hatırlatma</b> Internet Explorer 10 versiyonlarında -ms ön eki getirilmeli fakat 11.0 sürümüyle birlikte artık ön takı kullanmayabilirsiniz.</p>

<p><b>Hatırlatma</b> Safari 6.1 ve yeni versiyonlarında -webkit ön takısı getirilerek kullanılabilir.</p>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS flex Ö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 link Etiketi

HTML html Etiketi

JavaScript CSS3 border-right Örnek

HTML CSS margin Örnek

HTML label Etiketi

JavaScript CSS counter-reset Örnek

Html dersleri

HTML q Etiketi

HTML cite Etiketi Örnek