Propriedade flex-grow

A propriedade flex-grow define o quanto um bloco flex individual pode ser maior que os elementos adjacentes, se necessário.

Por exemplo, se todos os blocos flex dentro de um contêiner flex têm flex-grow:1, então eles terão o mesmo tamanho. Se um deles tiver flex-grow:2, ele será 2 vezes maior que todos os outros.

Se a largura total dos elementos for menor que a largura do elemento pai, haverá espaço vazio à direita. Se desejar, este espaço vazio pode ser dividido proporcionalmente entre nossos elementos. Isso é feito usando a propriedade flex-grow, aplicada aos elementos flex. O valor desta propriedade é um número adimensional.

Aplica-se a: um bloco flex específico.

Esta propriedade faz parte da propriedade abreviada flex.

Sintaxe

seletor {
	flex-grow: número positivo;
}

Valor padrão: 0.

Exemplo

Agora temos dois blocos flex com largura de 100px. Sua largura total é de 200px, e a largura do elemento pai é de 300px. Isso significa que sobra um espaço livre de 100px.

Se os elementos não tiverem flex-grow definido, simplesmente veremos este espaço livre. Se estiver definido, a largura real dos elementos será maior que a definida - eles dividirão proporcionalmente o espaço livre entre si e o adicionarão à sua largura.

Por exemplo, digamos que o primeiro elemento tenha flex-grow igual a 1, e o segundo - 3. Vamos calcular que parte do espaço livre cada elemento receberá.

Primeiro, precisamos obter a quantidade total de unidades de flex-grow de todos os nossos elementos. No primeiro elemento é 1, e no segundo - 3. Isso significa que a soma é 4.

Agora, vamos dividir 100px de espaço livre por 4 e obter que 25px correspondem a uma unidade de flex-grow. Isso significa que o primeiro elemento receberá uma unidade de flex-grow, ou seja, 25px, e o segundo - três unidades, ou seja, 75px.

A largura do primeiro elemento será 125px, e a do segundo - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 3;
}

Exemplo

Suponha que a largura do elemento pai seja 400px, a largura do primeiro elemento seja 200px, e a largura do segundo elemento - 100px. Isso significa que o espaço livre novamente é igual a 100px.

Vamos definir flex-grow para cada elemento como 1. A soma será 2, ou seja, 100px de espaço livre precisa ser dividido por 2. Isso significa que 50px correspondem a uma unidade de ganância.

Como todos os elementos têm o mesmo valor de flex-grow, todos receberão o mesmo valor de 50px. Isso significa que o primeiro elemento se tornará 250px, e o segundo se tornará 150px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Exemplo

Suponha novamente que a largura do elemento pai seja 400px, a largura do primeiro elemento seja 200px, e a largura do segundo elemento - 100px.

Agora, vamos definir para o primeiro elemento flex-grow como 3, e para o segundo - como 1. A soma da ganância será 4. Então, uma unidade de ganância é igual a 100px / 4 = 25px.

O primeiro elemento receberá 75px, e se tornará 275px, e o segundo - 25px, tornando-se 125px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent	{
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Veja também

a propriedade flex-direction,
que define a direção dos eixos dos blocos flex
a propriedade justify-content,
que define o alinhamento ao longo do eixo principal
a propriedade align-items,
que define o alinhamento ao longo do eixo transversal
a propriedade flex-wrap,
que define a quebra de linha dos blocos flex
a propriedade flex-flow,
abreviação para flex-direction e flex-wrap
a propriedade order,
que define a ordem dos blocos flex
a propriedade align-self,
que define o alinhamento de um bloco individual
a propriedade flex-basis,
que define o tamanho de um bloco flex específico
a propriedade flex-shrink,
que define a compressibilidade dos blocos flex
a propriedade flex,
abreviação para flex-grow, flex-shrink e flex-basis