flex-growNieruchomość jest sub-property modułu Flexible Box Layout.
Definiuje zdolność elementu elastycznego do wzrostu w razie potrzeby. Przyjmuje wartość bez jednostek, która służy jako proporcja. To dyktuje, jaką ilość dostępnego miejsca wewnątrz elastycznego pojemnika powinien zajmować przedmiot.
Na przykład, jeśli wszystkie elementy mają flex-growustawioną wartość 1, każde dziecko będzie miało taki sam rozmiar w kontenerze. Gdybyś nadał jednemu z dzieci wartość 2, zajęłoby ono dwa razy więcej miejsca niż inne.
Składnia
flex-grow: .flex-item ( flex-grow: 2; )Próbny
Poniższe demo pokazuje, jak obliczana jest pozostała przestrzeń na podstawie różnych wartości flex-grow(zobacz CodePen dla lepszego zrozumienia).
Wszystkie elementy mają flex-growwartość 1, z wyjątkiem trzeciego, który ma flex-growwartość 2. Oznacza to, że gdy dostępne miejsce zostanie rozdzielone, trzeci element elastyczny będzie miał dwa razy więcej miejsca niż inne.
Wsparcie przeglądarki
- (nowoczesny) oznacza najnowszą składnię ze specyfikacji (np.
display: flex;) - (hybryda) oznacza dziwną nieoficjalną składnię z 2011 roku (np.
display: flexbox;) - (stara) oznacza starą składnię z 2009 roku (np.
display: box;)
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (nowoczesny) 20- (stary) | 3.1+ (stary) | 2-21 (stare) 22+ (nowe) | 12.1+ (nowoczesny) | 10+ (hybryda) | 2.1+ (stary) | 3.2+ (stary) |
Przeglądarka Blackberry 10+ obsługuje nową składnię.
Więcej informacji na temat łączenia składni w celu uzyskania najlepszej obsługi przeglądarki można znaleźć w tym artykule (Sztuczki CSS) lub w tym artykule (DevOpera).