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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.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:

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

css.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:

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

css.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:

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

css.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.

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

css.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;
}

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

css.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;
}

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

css.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;
}

html<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>

css.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;
}