flex-growMülkiyet Esnek Kutu Düzeni modülünün bir alt özelliktir.
Esnek bir ürünün gerektiğinde büyüme yeteneğini tanımlar. Oran olarak hizmet eden birimsiz bir değeri kabul eder. Öğenin esnek kabın içinde ne kadar kullanılabilir alan kaplaması gerektiğini belirler.
Örneğin, tüm öğeler flex-grow1 olarak ayarlandıysa, her çocuk kap içinde eşit bir boyuta ayarlanacaktır. Çocuklardan birine 2 değerini verirseniz, o çocuk diğerlerinden iki kat daha fazla yer kaplar.
Sözdizimi
flex-grow: .flex-item ( flex-grow: 2; )Demo
Aşağıdaki demo, kalan alanın farklı değerlerine göre nasıl hesaplandığını gösterir flex-grow(daha iyi anlamak için CodePen'e bakın).
Tüm öğelerin flex-growdeğeri 1 olan 3'ünün flex-growdeğeri 2'dir. Bu, kullanılabilir alan dağıtıldığında, 3. esnek öğenin diğerlerinden iki kat daha fazla alana sahip olacağı anlamına gelir.
Tarayıcı Desteği
- (modern), spesifikasyondaki son sözdizimi anlamına gelir (örneğin
display: flex;) - (karma), 2011'den kalma garip bir resmi olmayan sözdizimi anlamına gelir (örneğin
display: flexbox;) - (eski), 2009'daki eski sözdizimi anlamına gelir (örneğin
display: box;)
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (eski) | 3.1+ (eski) | 2-21 (eski) 22+ (yeni) | 12.1+ (modern) | 10+ (karma) | 2.1+ (eski) | 3.2+ (eski) |
Blackberry tarayıcı 10+ yeni sözdizimini destekler.
En iyi tarayıcı desteğini elde etmek için sözdizimlerinin nasıl karıştırılacağı hakkında daha fazla bilgi için, lütfen bu makaleye (CSS Hileleri) veya bu makaleye (DevOpera) bakın.