CSS flex-shrink Özelliği
CSS flex-shrink
Cssflex-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 adetdiv 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;
}
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ındaki uygulama örneğinide mutlaka inceliyiniz.
| CSS flex-shrink | CSS flex-shrink özellikleri | |
|---|---|---|
| Varsayılan Değer: | 1 | |
| Kalıtsallık: | yok | |
| Animasyon Özelliği: | var | |
| Versiyon: | CSS3 | |
| JavaScript flex-shrink: | object.style.flexShrink="5" |
CSS flex-shrink Tarayıcı Desteği
Tablodaki sayılar bu özelliği destekleyen ilk tarayıcı sürümlerini gösterir.
| CSS Kodu: | |||||
|---|---|---|---|---|---|
| flex-shrink | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS flex-shrink Değerleri
flex-shrink:number|initial|inherit;
Yorumlar
Yorum Gönder