Atributo flex-grow do CSS

Disciplina eletiva

Recomendação de curso:

Definição e usoComentário:

Se o elemento não for um item flexível, a propriedade flex é inválida.

Veja também: Tutorial do CSS:

Propriedade flex-shrinkCaixa flexível do CSS

Propriedade flex-shrinkPropriedade flex

Propriedade flex-shrinkPropriedade flex-basis

Propriedade flex-shrinkPropriedade flex-direction

Propriedade flex-shrinkPropriedade flex-flow

Propriedade flex-shrinkManual do CSS:

Propriedade flex-wrapManual do HTML DOM:

Propriedade flexGrow

Exemplo

Faça com que a largura do segundo item flexível seja três vezes maior que a dos outros itens flexíveis:
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}

div:nth-of-type(3) {flex-grow: 1;}

Experimente você mesmo

Sintaxe do CSS Descriçãoflex-grow:

|initial|inherit;

Valor da propriedade Valor
Descrição number
Defina essa propriedade como seu valor padrão. Veja: Valor numérico, que define o aumento relativo desse item em comparação com os outros itens flexíveis. O valor padrão é 0. Defina essa propriedade como seu valor padrão. Veja:Propriedades relacionadas a animação
Herda essa propriedade do elemento pai. Veja: initial Herda essa propriedade do elemento pai. Veja:Propriedades relacionadas a animação

inherit

Detalhes técnicos Valor padrão:
0 Herança:
Não Produção de animação:Suporte. Veja:Propriedades relacionadas a animação
. Versão:
CSS3 Sintaxe do JavaScript:

object.style.flexGrow="5"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade, seguindo a regra de numeração dos prefixos -webkit-, -ms- ou -moz-. Utilize a primeira versão especificada antes de usar os prefixos.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0