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 progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS text-justify Özelliği

CSS border-collapse Özelliği

CSS overflow Özelliği

CSS justify-content Özelliği

HTML5 Canvas Oyun Yapımı Dersleri