Den flex-growegenskapen är en sub-egenskap hos den flexibla Box Layout modul.
Den definierar förmågan för en flexartikel att växa om det behövs. Det accepterar ett enhetslöst värde som fungerar som en proportion. Det dikterar vilken mängd av det tillgängliga utrymmet inuti flexbehållaren objektet ska ta upp.
Till exempel, om alla artiklar har flex-growställts in på 1, kommer varje barn att ställa in samma storlek inuti containern. Om du skulle ge ett av barnen värdet 2, skulle barnet ta dubbelt så mycket utrymme som de andra.
Syntax
flex-grow: .flex-item ( flex-grow: 2; )Demo
Följande demo visar hur det återstående utrymmet beräknas enligt de olika värdena för flex-grow(se på CodePen för bättre förståelse).
Alla objekt har flex-growvärdet 1 utom den tredje som har flex-growvärdet 2. Det betyder att när det tillgängliga utrymmet fördelas kommer det tredje flex-objektet att ha dubbelt så mycket utrymme som andra.
Webbläsarstöd
- (modern) betyder den senaste syntaxen från specifikationen (t.ex.
display: flex;) - (hybrid) betyder en udda inofficiell syntax från 2011 (t.ex.
display: flexbox;) - (gammal) betyder den gamla syntaxen från 2009 (t.ex.
display: box;)
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (gammal) | 3.1+ (gammal) | 2-21 (gammal) 22+ (ny) | 12.1+ (modern) | 10+ (hybrid) | 2.1+ (gammal) | 3.2+ (gammal) |
Blackberry webbläsare 10+ stöder den nya syntaxen.
För mer information om hur man blandar syntaxer för att få bästa webbläsarstöd, se den här artikeln (CSS-Tricks) eller den här artikeln (DevOpera).