Táto flex-growvlastnosť je podvlastnosťou modulu Flexibilné usporiadanie schránky.
Definuje schopnosť položky flexa v prípade potreby rásť. Prijíma bezjednotkovú hodnotu, ktorá slúži ako proporcia. Diktuje, aké množstvo dostupného priestoru vo vnútri flexibilnej nádoby má položka zaberať.
Napríklad, ak sú všetky položky flex-grownastavené na 1, každé dieťa bude mať v kontajneri rovnakú veľkosť. Ak by ste jednému z detí dali hodnotu 2, zaberalo by to dvakrát viac miesta ako ostatné.
Syntax
flex-grow: .flex-item ( flex-grow: 2; )Ukážka
Nasledujúca ukážka ukazuje, ako sa počíta zostávajúci priestor podľa rôznych hodnôt parametra flex-grow(pre lepšie pochopenie nájdete v aplikácii CodePen).
Všetky položky majú flex-growhodnotu 1, s výnimkou tretej, ktorá má flex-growhodnotu 2. To znamená, že keď sa distribuuje dostupné miesto, tretia flexibilná položka bude mať dvakrát viac priestoru ako ostatné.
Podpora prehľadávača
- (moderný) znamená nedávnu syntax zo špecifikácie (napr.
display: flex;) - (hybrid) znamená zvláštnu neoficiálnu syntax z roku 2011 (napr.
display: flexbox;) - (staré) znamená starú syntax z roku 2009 (napr.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderný) 20- (starý) | 3.1+ (staré) | 2-21 (staré) 22+ (nové) | 12.1+ (moderný) | 10+ (hybridný) | 2.1+ (staré) | 3.2+ (staré) |
Prehliadač Blackberry 10+ podporuje novú syntax.
Viac informácií o tom, ako kombinovať syntaxe s cieľom získať najlepšiu podporu prehľadávača, nájdete v tomto článku (CSS-triky) alebo v tomto článku (DevOpera).