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

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

Javascript ile neler yapılabilir

CSS top Özelliği

HTML strong Etiketi

Kriptopara nasıl alınır ve nereden alınır?

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Javascript Oyun Yapma Dersleri HTML5+CSS3

CSS flex-basis Özelliği

HTML5 Canvas Oyun Yapımı Dersleri