Yayınlar

flex-basis etiketine sahip yayınlar gösteriliyor

CSS flex-basis Özelliği

CSS flex-basis Css flex-basis :Esnek kutu modelinde optimum boyutunu belirlemek için kullanılır. Eğer yeterli genişlik var ise esnek kutu verilen değer boyutunda olacaktır. Örnek: Bu örnekte anaka kutu içerisindeki bütün elemanlara başlangıç uzunluğu 40px verilmiştir.2. sıradaki elemanının genişliğini ise 90px olarak değiştirdik. #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; } Kendiniz deneyin » CSS flex-basis nedir nasıl kullanılır Flex-basis özelliği sayısal olarak uzunluk yani genişlik tanımlamıza yarar. CSS flex-basis CSS flex-basis özellikleri   Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var   Versiyon: CSS3  

CSS flex-basis animasyon

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <style> #main { width: 300px; height: 300px; border: 1px solid gray; display: flex; } #main div { flex-grow: 0; flex-shrink: 0; flex-basis: 50px; } #mavi { animation: animasyonismi 6s infinite; -webkit-animation: animasyonismi 6s infinite; } @-webkit-keyframes animasyonismi { 50% {flex-basis: 250px;} } @keyframes animasyonismi { 50% {flex-basis: 250px;} } </style></head>

CSS flex-basis uygulama

CSS flex-basis div#kirmizikutu {<br>    flex-basis:<span id='rfrnscsscde'> 1</span>;<br>}<br> CSS flex-basis değerleri 0 15px 25px 45px 85px 150px auto initial Sonuç Ekranı Sonuçları görmek için değerlerin üzerine geliniz. HtmlveCSSEğitimi.blogspot.com

JavaScript CSS flex-basis Örnek

javascript css flex-basis özelliği örnek uygulama sarı Kırmızı Javascript ile flex-basis özelliğine "250px" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("anakutu").style.flexBasis = "250px"; document.getElementById("kirmizikutu").style.WebkitFlexBasis = "250px"; document.getElementById("kirmizikutu").style.flexBasis = "250px"; } Çalıştır JavaScript css flex-basis © htmlvecssegitimi.blogspot.com

CSS flex-basis Örnek

htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı 'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE 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; f