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; }

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;

CSS flex-shrink özelliği değerleri

CSS flex-shrink değerleri CSS flex-shrink değerleri tanımları CSS örnek uygulamalar
number Göreceli daraltılacak /büzülecek eleman için sayı girilir.
initial Özelliğin varsayılan değeridir.
inherit Soybağından gelen değeri kullanır.  

Yorumlar

Bu blogdaki popüler yayınlar

HTML Resimler

HTML yorum etiketi ile öğe gizleme örneği

YouTube Reklam Engelleyici

HTML5 Canvas Oyun Yapımı Dersleri

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

Linklerin Renklerini Değiştirme Örnek

Uyurken Bile Para Kazanmak İster misin

javascript ile aciklama satiri ve haftanın gunünü bulma