CSS esnek-büyüme özelliği

Tanım ve kullanım

flex-grow özelliği, aynı konteyner içinde, öğenin diğer esnek öğelere göre artış miktarını belirler.

Açıklama:Eğer element esnek bir öğe değilse, flex özelliği geçersizdir.

Ayrıca bakınız:

CSS eğitimi: CSS esnek çerçevesi

CSS referans el kitabı:flex özelliği

CSS referans el kitabı:flex-basis özelliği

CSS referans el kitabı:flex-direction özelliği

CSS referans el kitabı:flex-flow özelliği

CSS referans el kitabı:flex-shrink özelliği

CSS referans el kitabı:flex-wrap özelliği

HTML DOM referans el kitabı:flexGrow özelliği

Örnek

İkinci esnek öğenin genişliğini diğer esnek öğelere göre üç katına çıkarın:

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

Kişisel olarak deneyin

CSS dilbilgisi

flex-grow: number|initial|inherit;

Özellik değeri

Değer Açıklama
number Sayısal değer, bu öğenin diğer esnek öğelere göre artış miktarını belirler. Varsayılan 0'dır.
initial Bu özelliği varsayılan değerine ayarlar. Ayrıca bakınız initial.
inherit Bu özelliği ebeveyn elementinden devralır. Ayrıca bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: 0
Devralma: Hayır
Animasyon yapımı: Desteği var. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.flexGrow="5"

Tarayıcı desteği

Tablo, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtir.

Takip et -webkit-、-ms- veya -moz- ön ekli numaraların ilk sürümünü kullanmak için önceden belirtilen numaraları kullanın.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0