Tato flex-growvlastnost je dílčí vlastností modulu Flexibilní rozvržení krabice.
Definuje schopnost položky flexu v případě potřeby růst. Přijímá bezjednotkovou hodnotu, která slouží jako proporce. Diktuje, jaké množství dostupného prostoru uvnitř flex kontejneru má položka zabírat.
Například pokud jsou všechny položky flex-grownastaveny na 1, každé dítě bude uvnitř kontejneru nastaveno na stejnou velikost. Pokud byste jednomu z dětí dali hodnotu 2, zabralo by toto dítě dvakrát tolik místa než ostatní.
Syntax
flex-grow: .flex-item ( flex-grow: 2; )Ukázka
Následující ukázka ukazuje, jak se zbývající prostor počítá podle různých hodnot flex-grow(pro lepší pochopení viz CodePen).
Všechny položky mají flex-growhodnotu 1, s výjimkou třetí, která má flex-growhodnotu 2. To znamená, že když je dostupný prostor distribuován, třetí flex-položka bude mít dvakrát tolik prostoru jako ostatní.
Podpora prohlížeče
- (moderní) znamená nedávnou syntaxi ze specifikace (např.
display: flex;) - (hybrid) znamená lichou neoficiální syntaxi z roku 2011 (např.
display: flexbox;) - (old) znamená starou syntaxi z roku 2009 (např.
display: box;)
| Chrome | Safari | Firefox | Opera | TJ | 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ý) |
Prohlížeč Blackberry 10+ podporuje novou syntaxi.
Další informace o tom, jak kombinovat syntaxe s cílem získat nejlepší podporu prohlížeče, najdete v tomto článku (CSS-Tricks) nebo v tomto článku (DevOpera).