CSS flex-grow Özelliği
CSS flex-grow
Cssflex-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 bunlaraflex-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 verilenflex-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;
Yorumlar
Yorum Gönderme