Propriedade flex-grow §

---

A propriedade flex-grow é utilizada no contexto do modelo de layout flexbox. Ela define a capacidade de um item crescer em relação aos outros itens dentro do mesmo contêiner com a regra display: flex. Em outras palavras, ela especifica a proporção do espaço disponível que um item ocupará em relação aos outros itens quando há espaço sobrando.

Exemplo §

Considere o exemplo abaixo:

.flex-container {
  display: flex;
}
 
.flex-item-1 {
  flex-grow: 1;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  padding: 10px;
}
 
.flex-item-2 {
  flex-grow: 2;
  background-color: #e74c3c;
  color: #fff;
  text-align: center;
  padding: 10px;
}
 
.flex-item-3 {
  flex-grow: 1;
  background-color: #2ecc71;
  color: #fff;
  text-align: center;
  padding: 10px;
}

<div class="flex-container">
  <div class="flex-item-1">Item 1</div>
  <div class="flex-item-2">Item 2</div>
  <div class="flex-item-3">Item 3</div>
</div>

• O flex-item-1 tem flex-grow: 1.
• O flex-item-2 tem flex-grow: 2.
• O flex-item-3 tem flex-grow: 1.

Isso significa que, quando há espaço extra no contêiner, o flex-item-2 crescerá duas vezes mais rápido que os outros itens, ocupando uma proporção maior desse espaço adicional. O flex-item-1 e o flex-item-3 ocuparão espaços adicionais igualmente.

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado