Propriedade flex-grow: Fazendo itens 'crescerem'

A propriedade flex-grow é uma das propriedades mais poderosas e flexíveis do Flexbox, aplicada diretamente aos Itens Flex. Ela define a capacidade de um item flex de "crescer" e ocupar o espaço extra disponível no Contêiner Flex, ao longo do eixo principal.

Pense no flex-grow como uma "fatia de bolo" que cada Item Flex pode reivindicar do espaço extra. Se há espaço sobrando no contêiner, os itens com flex-grow maior receberão uma fatia maior desse espaço, expandindo-se para preenchê-lo.

Como funciona flex-grow

• Valor Padrão: O valor padrão de flex-grow para todos os Itens Flex é 0. Isso significa que, por padrão, os itens não crescem para ocupar o espaço extra. Eles manterão seu tamanho original (definido por width/height ou flex-basis).
• Números Não Negativos: Você pode atribuir qualquer número não negativo (inteiro ou decimal) a um Item Flex. Este número representa uma "proporção" ou "fator de crescimento".
• Distribuição do Espaço Extra:
  • Se todos os itens tiverem flex-grow: 1;, eles compartilharão o espaço extra igualmente.
  • Se um item tiver flex-grow: 2; e outro tiver flex-grow: 1;, o primeiro item receberá o dobro do espaço extra que o segundo item.

Importante: flex-grow só tem efeito se houver espaço extra disponível no Contêiner Flex ao longo do eixo principal. Se os itens já ocupam todo o espaço (ou transbordam), flex-grow não fará nada.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Flex-grow</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
    }

    .flex-container {
      display: flex;
      background-color: #e0e0e0;
      border: 2px solid #333;
      padding: 10px;
      height: 100px;
      margin-bottom: 20px;
      width: 100%; /* Para garantir espaço extra */
    }

    .flex-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      margin: 5px;
      color: #333;
      font-weight: bold;
      text-align: center;
      width: 100px; /* Tamanho inicial dos itens */
      line-height: 60px;
    }

    /* --- Exemplos de flex-grow --- */

    .grow-0 {
      flex-grow: 0; /* Padrão: não cresce */
      background-color: lightcoral;
    }

    .grow-1 {
      flex-grow: 1; /* Cresce para ocupar o espaço extra */
      background-color: lightgreen;
    }

    .grow-2 {
      flex-grow: 2; /* Cresce o dobro do que um item com flex-grow: 1 */
      background-color: lightgoldenrodyellow;
    }

    .grow-3 {
      flex-grow: 3; /* Cresce o triplo do que um item com flex-grow: 1 */
      background-color: lightsalmon;
    }

    /* Exemplo com flex-direction: column */
    .container-column {
      flex-direction: column;
      height: 300px; /* Altura para garantir espaço extra vertical */
      width: 150px;
    }
  </style>
</head>
<body>
  <h1>Propriedade `flex-grow`</h1>

  <h2>Exemplo 1: Itens com `flex-grow: 0` (Padrão)</h2>
  <div class="flex-container">
    <div class="flex-item grow-0">Item 1 (grow: 0)</div>
    <div class="flex-item grow-0">Item 2 (grow: 0)</div>
    <div class="flex-item grow-0">Item 3 (grow: 0)</div>
  </div>
  <p>Os itens mantêm sua largura de 100px e não crescem, deixando espaço extra no contêiner.</p>

  <h2>Exemplo 2: Todos os itens com `flex-grow: 1`</h2>
  <div class="flex-container">
    <div class="flex-item grow-1">Item 1 (grow: 1)</div>
    <div class="flex-item grow-1">Item 2 (grow: 1)</div>
    <div class="flex-item grow-1">Item 3 (grow: 1)</div>
  </div>
  <p>Os itens compartilham o espaço extra igualmente, expandindo-se para preencher o contêiner.</p>

  <h2>Exemplo 3: Itens com diferentes valores de `flex-grow`</h2>
  <div class="flex-container">
    <div class="flex-item grow-1">Item 1 (grow: 1)</div>
    <div class="flex-item grow-2">Item 2 (grow: 2)</div>
    <div class="flex-item grow-1">Item 3 (grow: 1)</div>
  </div>
  <p>O "Item 2" recebe o dobro do espaço extra que os "Item 1" e "Item 3".</p>

  <h2>Exemplo 4: `flex-grow` com `flex-direction: column`</h2>
  <div class="flex-container container-column">
    <div class="flex-item grow-1">Item 1 (grow: 1)</div>
    <div class="flex-item grow-2">Item 2 (grow: 2)</div>
    <div class="flex-item grow-1">Item 3 (grow: 1)</div>
  </div>
  <p>Os itens crescem verticalmente para preencher o espaço extra na coluna.</p>
</body>
</html>

Resultado:

• Você verá como os itens se expandem para preencher o espaço extra, e como a proporção de flex-grow afeta a quantidade de espaço que cada item recebe.
• No exemplo 1, os itens mantêm seu tamanho.
• No exemplo 2, todos os itens se expandem igualmente.
• No exemplo 3, o item com flex-grow: 2 fica visivelmente maior.
• No exemplo 4, o crescimento ocorre verticalmente.

Boas Práticas:

• Espaço Extra: Lembre-se que flex-grow só funciona se houver espaço extra no contêiner. Se os itens já ocupam todo o espaço, flex-grow não terá efeito.
• Proporções: Pense nos valores de flex-grow como proporções. flex-grow: 1; em todos os itens é como dizer "divida o espaço extra igualmente". flex-grow: 1; 2; 1; é como dizer "divida o espaço extra em 4 partes, dando 1 para o primeiro, 2 para o segundo e 1 para o terceiro".
• flex-basis: flex-grow trabalha em conjunto com flex-basis (que veremos em uma lição futura) para determinar o tamanho final dos itens. flex-basis define o tamanho inicial, e flex-grow adiciona o espaço extra a partir desse tamanho.
• Responsividade: flex-grow é fundamental para criar layouts responsivos, permitindo que os itens se ajustem dinamicamente ao espaço disponível.

Dominar flex-grow é essencial para criar layouts Flexbox que se adaptam de forma inteligente ao espaço disponível, garantindo que seus elementos preencham o contêiner de maneira eficaz.