В flex-growимота е под-собственост на модула гъвкави полета Разпределение на.
Той определя способността на флекс елемент да расте, ако е необходимо. Приема безразмерна стойност, която служи като пропорция. Той диктува каква част от наличното пространство вътре в гъвкавия контейнер трябва да заема артикулът.
Например, ако всички елементи са flex-growзадали 1, всяко дете ще зададе еднакъв размер вътре в контейнера. Ако трябва да дадете на едно от децата стойност 2, това дете ще заема два пъти повече място от останалите.
Синтаксис
flex-grow: .flex-item ( flex-grow: 2; )Демонстрация
Следващата демонстрация показва как се изчислява оставащото пространство според различните стойности на flex-grow(вижте CodePen за по-добро разбиране).
Всички елементи имат flex-growстойност 1, с изключение на третата, която има flex-growстойност 2. Това означава, че когато разпределеното налично пространство, третата гъвкава позиция ще има два пъти повече място от останалите.
Поддръжка на браузър
- (модерно) означава скорошния синтаксис от спецификацията (напр.
display: flex;) - (хибрид) означава странен неофициален синтаксис от 2011 г. (напр.
display: flexbox;) - (стар) означава стария синтаксис от 2009 г. (напр.
display: box;)
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (модерен) 20- (стар) | 3.1+ (стари) | 2-21 (стар) 22+ (нов) | 12.1+ (модерен) | 10+ (хибридни) | 2.1+ (стари) | 3.2+ (стари) |
Браузърът Blackberry 10+ поддържа новия синтаксис.
За повече информация как да смесвате синтаксиси, за да получите най-добрата поддръжка на браузъра, моля, вижте тази статия (CSS-трикове) или тази статия (DevOpera).