CSS esnek-büyüme özelliği
- Önceki sayfa flex-flow
- Sonraki sayfa flex-shrink
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;}
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 |
- Önceki sayfa flex-flow
- Sonraki sayfa flex-shrink