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 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 justify-content Özelliği

CSS overflow Özelliği

CSS border-collapse Özelliği

CSS top Özelliği