Propriedade Flex Grow
Última atualização: 2026-09-13
flex-grow Propriedade Flex Grow
A propriedade flex-grow define o fator de crescimento de um item flex. Ela decide quanto do espaço restante no container o item pode ocupar. O valor padrão é 0, o que significa que o item não cresce e mantém seu tamanho original. Valores maiores dão ao item uma fatia maior: o espaço restante é distribuído entre todos os itens na proporção de seus valores flex-grow.
| Categoria | |
|---|---|
| Valor Inicial | 0 |
| Herdado | Não |
| Aplica-se A | itens flex |
| Tipo de Animação | number |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
flex-grow: <number>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<number> | Tipo | Fator de crescimento; 0 significa que o item não cresce. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-grow | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： flex-grow é uma proporção sem unidade e não aceita valores negativos. O espaço restante é compartilhado conforme a razão dos valores flex-grow; por exemplo, 1:2:3 distribui o espaço em 1/6, 2/6 e 3/6.
Aviso： flex-grow só tem efeito quando o container tem espaço sobrando. Se os itens já preenchem a largura do container, o flex-grow não os encolherá; para isso use flex-shrink.
❓ Perguntas Frequentes
Qflex-grow pode ser um número decimal?
ASim. flex-grow aceita qualquer número não negativo, incluindo decimais, então flex-grow: 0.5 é válido. O espaço restante é dividido conforme a razão relativa de todos os valores flex-grow, o que significa que uma combinação 0.5 e 1 se comporta exatamente como 1 e 2; apenas a razão importa. Decimais pequenos como 0.5 ou 0.3 são úteis quando você quer que um item cresça levemente sem dobrar de tamanho.
QPor que meu item não cresce mesmo eu tendo definido flex-grow?
AMotivos comuns: o container não tem espaço sobrando porque os itens já preenchem toda a largura, o pai esqueceu de definir display: flex, ou flex-basis é auto e o conteúdo já empurra o tamanho base ao máximo. Primeiro verifique se o container é mais largo que a largura total dos itens e depois revise flex-basis: para deixar flex-grow assumir totalmente a distribuição, geralmente defina flex-basis como 0.
QO que significa "flex-grow distribui o espaço restante, não a largura total"?
AO flex primeiro dispõe cada item conforme flex-basis, que por padrão é auto, ou seja, a largura do conteúdo. O que sobra é o espaço restante, e apenas essa parte é dividida proporcionalmente pelo flex-grow. Para um container de 600px cujos três itens totalizam 300px de conteúdo, apenas os 300px restantes são distribuídos. Portanto, com o flex-basis padrão, flex-grow: 1 não produz itens de largura igual a menos que flex-basis seja definido como 0.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Atalho Flex
Atalho para flex-grow, flex-shrink e flex-basis.
Flex Shrink
Controla quanto um item flex encolhe.
