CSS flex-grow Özelliği

CSS flex-grow

Css flex-grow özelliği esnek kutu içerisindeki elemanları girilen değere göre göreceli olarak genişliğini ayarlayan özelliktir.

Örnek:

Bu örnekte bir esnek kutu içerisine 5 adet eleman yerleştirilmiştir. Ve bunlara flex-grow özelliğine sırasıyla 1 ,3, 1, 2, 1 değerleri verildi.Verilen örneği incelediğinizde göreceğiniz üzere elemanların genişlikleri bu sayılarla orantılıdır !

#anakutu div:nth-of-type(1) { flex-grow: 1; } #anakutu div:nth-of-type(2) { flex-grow: 3; } #anakutu div:nth-of-type(3) { flex-grow: 1; } #anakutu div:nth-of-type(4) { flex-grow: 2; } #anakutu div:nth-of-type(5) { flex-grow: 1; }

CSS flex-grow nedir nasıl kullanılır

Bir esnek kutu modelinde elemanlara verilen flex-grow özelliğiyle göreceli genişlik değerleri verilerek boyutlandırma işlemi gerçekleştirilir.

CSS flex-grow	CSS flex-grow özellikleri
Varsayılan Değer:	0
Kalıtsallık:	yok
Animasyon Özelliği:	var
Versiyon:	CSS3
JavaScript flex-grow:	object.style.flexGrow="3"

CSS flex-grow Tarayıcı Desteği

Tabloda verilen sayılar bu özelliği destekleyen ilk tarayıcı sürümleridir.

CSS Kodu:
flex-grow	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

CSS flex-grow Değerleri

flex-grow:number|initial|inherit;