A flex-growpropriedade é uma subpropriedade do módulo Layout de caixa flexível.
Ele define a capacidade de um item flexível crescer, se necessário. Aceita um valor sem unidade que serve de proporção. Ele determina a quantidade de espaço disponível dentro do flex container que o item deve ocupar.
Por exemplo, se todos os itens foram flex-growdefinidos como 1, cada criança será definida com o mesmo tamanho dentro do contêiner. Se você desse a uma das crianças o valor 2, essa criança ocuparia o dobro de espaço das outras.
Sintaxe
flex-grow: .flex-item ( flex-grow: 2; )Demo
A demonstração a seguir mostra como o espaço restante está sendo calculado de acordo com os diferentes valores de flex-grow(consulte CodePen para melhor compreensão).
Todos os itens têm o flex-growvalor 1 exceto o 3º que tem o flex-growvalor 2. Isso significa que quando o espaço disponível for distribuído, o 3º flex-item terá o dobro de espaço dos outros.
Suporte para navegador
- (moderno) significa a sintaxe recente da especificação (por exemplo
display: flex;) - (híbrido) significa uma sintaxe não oficial estranha de 2011 (por exemplo
display: flexbox;) - (antigo) significa a sintaxe antiga de 2009 (por exemplo
display: box;)
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (moderno) 20- (antigo) | 3.1+ (antigo) | 2-21 (antigo) 22+ (novo) | 12,1+ (moderno) | 10+ (híbrido) | 2.1+ (antigo) | 3.2+ (antigo) |
O navegador Blackberry 10+ suporta a nova sintaxe.
Para obter mais informações sobre como misturar sintaxes para obter o melhor suporte do navegador, consulte este artigo (CSS-Tricks) ou este artigo (DevOpera).