Kayıtlar

flex-shrink etiketine sahip yayınlar gösteriliyor

CSS flex-shrink Özelliği

CSS flex-shrink Css flex-shrink özelliği flex-grow özelliğinin tersine büzülme veya daralma da diyebileceğimiz bir etki yaratarak esnek kutu elemanlarına göre göreceli olarak genişlik azaltacaktır. Örnek: Bu örnekte esnek kutu içersinde 5 adet div elemanı yerleştirilmiştir.Bu elemanlardan mavi olan elemana flex-shrink özelliği ve değer olarakta 2 veriyoruz. Sonuç olarak mavi kutunun genişliği yarıya düşecektir. #main div { -webkit-flex-grow: 1; -webkit-flex-shrink: 1; -webkit-flex-basis: 100px; flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } #main div:nth-of-type(3) { -webkit-flex-shrink: 2; flex-shrink: 2; } Kendiniz deneyin » CSS flex-shrink nedir nasıl kullanılır Css flex shrink özelliğini kullanarak esnek kutu içerisindeki elemanların genişliklerini referans alarak istenilen bir elemana istenilen ölçüde genişlik tanımlandırılabilir.Özelliğin etkisini görmek için sayfanın aşağısı

JavaScript CSS flex-shrink Örnek

javascript css flex-shrink özelliği örnek uygulama Javascript ile flex-shrink özelliğine "5" 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.flexShrink = "5"; document.getElementById("mavi").style.WebkitFlexShrink = "5"; } Çalıştır JavaScript css flex-shrink © htmlvecssegitimi.blogspot.com

CSS flex-shrink 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: 250px; border: 1px solid black; display: flex; color:white; } #main div { flex-grow: 1; flex-shrink: 1; flex-basis: 300px; } #yesilkutu { -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; } @-webkit-keyframes animasyonismi { 50% {flex-shrink:3;} } @keyframes animasyonismi { 50% {flex-shrink: 3;} } </style

CSS flex-shrink uygulama

CSS flex-shrink div#pembekutu {<br>    flex-shrink:<span id='rfrnscsscde'> 1</span>;<br>}<br> CSS flex-shrink değerleri 0 1 2 3 initial Sonuç Ekranı Sonuçları görmek için değerlerin üzerine geliniz. HtmlveCSSEğitimi.blogspot.com

CSS flex-shrink Ö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-shrink özelliği ve örnek uygulama</title> <style> #main { width: 300px; height: 150px; border: 2px solid black; display: -webkit-flex; display: flex; } #main div { -webkit-flex-grow: 1; -webkit-flex-shrink: 1; -webkit-flex-basis: 100px; flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } #main div:nth-of-type(3) { -webkit-flex-shrink: 2; flex-shri