CSS flex-basis Ö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-basis özelliği ve örnek uygulama</title> <style> #anakutu { width: 250px; height: 150px; border: 2px solid yellow; display: -webkit-flex; display: flex; } #anakutu div { -webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 40px; flex-grow: 0; flex-shrink: 0; flex-basis: 40px; } #anakutu div:nth-of-type(2) { -webkit-flex-basis: 90px; flex-basis: 90px; } </style> </head> <body> <div id="anakutu"> <div style="background-color:red;">R</div> <div style="background-color:green;">G</div> <div style="background-color:blue;">B</div> <div style="background-color:pink;">P</div> <div style="background-color:brown;">K</div> </div> <p><b>Hatırlatma:</b> Internet Explorer 10 ve önceki versiyonlar flex-basis özelliğini desteklemiyor..</p> <p><b>Hatırlatma:</b> Safari 6.1 ve sonrasındaki versiyonlarda -webkit öntakısı kullanarak kullanabilirsiniz..</p> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

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

<head>
  <meta charset="UTF-8">
  <title>css flex-basis özelliği ve örnek uygulama</title>
  <style>
    #anakutu {
        width: 250px;
        height: 150px;
        border: 2px solid yellow;
        display: -webkit-flex; 
        display: flex;
    }
    
    #anakutu div {
        -webkit-flex-grow: 0;
        -webkit-flex-shrink: 0; 
        -webkit-flex-basis: 40px; 
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 40px;
    }
    
    #anakutu div:nth-of-type(2) {
        -webkit-flex-basis: 90px; 
        flex-basis: 90px;
    }
  </style>
</head>

<p><b>Hatırlatma:</b> Internet Explorer 10 ve önceki versiyonlar flex-basis özelliğini desteklemiyor..</p>

<p><b>Hatırlatma:</b> Safari 6.1 ve sonrasındaki versiyonlarda -webkit öntakısı kullanarak kullanabilirsiniz..</p>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS flex-basis Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML s Etiketi

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

HTML p Etiketi

CSS flex-flow Örnek

Html belgesi yapısını anlama uygulaması

Html dersleri

HTML5 ile SEO Uyumlu İçerik Üret

Web Sitenizden Çok Para Kazanin

CSS3 animation-delay Uygulama

javascript yazım kuralları