A propriedade flex-grow de elementos flex em CSS
Suponha que temos dois blocos flex,
alinhados em uma linha. Esses blocos têm uma largura
de 100px, e seu pai - 300px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Como você pode ver, a largura total dos nossos elementos é menor que a largura do pai, então há um espaço vazio à direita.
Se desejar, este espaço vazio pode ser
dividido proporcionalmente entre os nossos elementos.
Isso é feito usando a propriedade flex-grow,
aplicada aos elementos flex. O valor desta propriedade
é um número adimensional.
Vamos ver na prática como esta propriedade funciona.
Exemplo
Agora temos dois blocos flex com largura de
100px. A largura total dos elementos é de
200px, e a largura do 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 for definido, então 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, deixe o flex-grow do primeiro elemento
igual a 1, e o do 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 os 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á de 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 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
é 100px.
Vamos definir flex-grow para cada elemento,
igual a 1. A soma será 2,
ou seja, os 100px de espaço livre
precisam ser divididos por 2. Isso significa que
50px correspondem a uma
unidade de crescimento (flex-grow).
Como todos os elementos têm o mesmo valor de
flex-grow, então todos os elementos 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 pai seja 400px,
a largura do primeiro elemento seja 200px, e a largura
do segundo elemento - 100px.
Agora, vamos definir o flex-grow do primeiro elemento
como 3, e o do segundo
- como 1. Isso significa que a soma do crescimento (flex-grow)
é 4. Então, uma unidade
de crescimento é 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;
}
:
Tarefas práticas
Em todas as tarefas abaixo, você verá
um código com elementos flex, tendo
largura e flex-grow. Com base no código
apresentado, calcule quais dimensões
cada um dos elementos terá. Em seguida, execute o código
e verifique seus cálculos, medindo as larguras reais dos elementos.
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
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;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 700px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 200px;
flex-grow: 3;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.parent {
display: flex;
width: 500px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 1;
}
.elem3 {
width: 100px;
flex-grow: 1;
}
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
<div class="child elem4">4</div>
</div>
.parent {
display: flex;
width: 1000px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 200px;
flex-grow: 1;
}
.elem2 {
width: 100px;
flex-grow: 2;
}
.elem3 {
width: 100px;
flex-grow: 4;
}
.elem4 {
width: 100px;
flex-grow: 3;
}
