Propriedade CSS flex-grow
A propriedade flex-grow define quanto o item vai crescer. Veja os valores desta propriedade e experimente alguns exemplos.
A propriedade flex-grow controla o quanto um item flex cresce para preencher o espaço livre restante dentro do seu contêiner flex. O valor é um fator de crescimento sem unidade, não um comprimento: ele responde à pergunta "quando há espaço extra, qual parte dele este item deve ocupar?"
Quando cada item tem um fator flex-grow, o espaço restante é dividido proporcionalmente a esses fatores. O tamanho principal de um item flex é sua largura ou altura, dependendo do flex-direction: em uma linha os itens crescem horizontalmente, em uma coluna crescem verticalmente.
Esta propriedade é uma das propriedades CSS3. Normalmente é usada em conjunto com flex-shrink (como os itens encolhem quando o espaço é insuficiente) e flex-basis (o tamanho inicial deles), e os três geralmente são definidos de uma vez através do atalho flex.
Como o espaço livre é distribuído
O algoritmo flex é executado em duas etapas:
- Posicionar cada item no seu
flex-basis(ou no tamanho do conteúdo seflex-basis: auto). - Medir o espaço livre — o tamanho principal do contêiner menos a soma desses tamanhos base — e distribuí-lo proporcionalmente ao fator
flex-growde cada item.
Se os itens acima começam com largura próxima a zero e o contêiner tem, digamos, 600px de espaço livre com fatores 1, 2, 1, 1, 1 (total 6), cada unidade vale 600 / 6 = 100px. Assim, o item com fator 2 recebe 200px de crescimento, enquanto cada item com fator 1 recebe 100px. Dobrar o fator dobra a parte do espaço extra — isso não faz um item ser duas vezes mais largo no geral.
flex-grow só tem efeito quando há espaço livre e os itens são de fato itens flex (o pai tem display: flex ou display: inline-flex). Sem espaço livre, ou sem itens flex, não tem efeito algum.
| Valor Inicial | 0 |
|---|---|
| Aplica-se a | Itens flex, incluindo pseudo-elementos no fluxo. |
| Herdado | Não. |
| Animável | Sim. Os itens são animáveis. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.flexGrow = 3; |
Sintaxe
Sintaxe da Propriedade CSS flex-grow
flex-grow: number | initial | inherit;Exemplo da propriedade flex-grow:
Exemplo da Propriedade CSS flex-grow com valor numérico
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 2;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Resultado
Exemplo da propriedade flex-grow com um fator de crescimento maior:
Propriedade CSS flex-grow com um número como valor
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 6;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Usando flex-grow dentro do atalho flex
Raramente se escreve flex-grow isoladamente. O padrão mais comum é flex: 1, que é um atalho para flex-grow: 1; flex-shrink: 1; flex-basis: 0. Definir a base como 0 instrui o navegador a ignorar o tamanho do conteúdo e dividir o inteiro contêiner proporcionalmente, de modo que vários itens com flex: 1 acabem com exatamente a mesma largura:
.item {
flex: 1; /* grow:1 shrink:1 basis:0 → equal columns */
}Para que um item ocupe o dobro da parte dos outros, aumente seu fator de crescimento:
.sidebar { flex: 1; }
.main { flex: 2; } /* gets 2/3 of the space, sidebar gets 1/3 */Armadilhas comuns
- Fator, não largura.
flex-grow: 2não significa "duas vezes mais largo" — significa "o dobro da parte do espaço restante." Quando os itens têm tamanhos de conteúdo diferentes, as larguras finais não serão uma proporção exata de 2:1, a menos queflex-basisseja0. - Valores negativos são inválidos. Eles são ignorados e a propriedade mantém seu valor anterior.
- Sem espaço livre, sem efeito. Se os itens já preenchem (ou ultrapassam) o contêiner,
flex-grownão muda nada — esse caso é tratado por flex-shrink. - O fator não tem unidade. Não escreva
flex-grow: 2px; esse não é um valor válido.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| number | Especifica o quanto o item vai crescer em relação aos demais itens flexíveis do mesmo contêiner. O valor padrão é 0. | Experimente » |
| initial | Define a propriedade com seu valor padrão. | Experimente » |
| inherit | Herda esta propriedade do elemento pai. |