flex-growĪpašums ir sub-īpašums Elastīga Box Izkārtojums moduli.
Tas nosaka spēju elastīgam priekšmetam augt, ja nepieciešams. Tā pieņem vērtību bez vienībām, kas kalpo kā proporcija. Tas nosaka, cik daudz vietas vajadzētu aizņemt elastīgā konteinera iekšpusē.
Piemēram, ja visi vienumi ir flex-growiestatīti uz 1, katrs bērns konteinera iekšpusē iestatīs vienādu izmēru. Ja jūs kādam no bērniem piešķirtu vērtību 2, šis bērns aizņemtu divreiz vairāk vietas nekā pārējie.
Sintakse
flex-grow: .flex-item ( flex-grow: 2; )Demonstrācija
Šajā demonstrācijā parādīts, kā tiek aprēķināta atlikusī telpa atbilstoši dažādām vērtībām flex-grow(lai labāk izprastu, skatiet vietnē CodePen).
Visiem vienumiem ir flex-growvērtība 1, izņemot trešo, kura flex-growvērtība ir 2. Tas nozīmē, ka, sadalot pieejamo vietu, trešajam elastīgajam priekšmetam būs divreiz vairāk vietas nekā citiem.
Pārlūka atbalsts
- (mūsdienu) nozīmē neseno sintaksi no specifikācijas (piem.
display: flex;) - (hibrīds) ir nepāra neoficiāla sintakse no 2011. gada (piem.
display: flexbox;) - (vecs) nozīmē veco sintaksi no 2009. gada (piem.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (mūsdienu) 20 - (vecs) | 3.1+ (vecs) | 2–21 (vecs) 22+ (jauns) | 12,1+ (mūsdienu) | 10+ (hibrīds) | 2.1+ (vecs) | 3,2+ (vecs) |
Blackberry pārlūks 10+ atbalsta jauno sintaksi.
Lai iegūtu papildinformāciju par sintakses sajaukšanu, lai iegūtu vislabāko pārlūka atbalstu, lūdzu, skatiet šo rakstu (CSS-Tricks) vai šo rakstu (DevOpera).