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;

CSS flex-grow özelliği değerleri

CSS flex-grow değerleri CSS flex-grow değerleri tanımları CSS örnek uygulamalar
number Elemenların göreceli genişlik katsayı da denilebilir. İki div elemanından birine "1" diğerine "2" değeri girilirse genişlikleride bu sayılarla doğru orantılı olacaktır.
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

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

HTML5 Canvas Oyun Yapımı Dersleri

YouTube Reklam Engelleyici

Linklerin Renklerini Değiştirme Örnek

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

Uyurken Bile Para Kazanmak İster misin