Propriedade flex-wrap: Quebrando linhas de itens

Por padrão, os Itens Flex tentarão se manter em uma única linha (ou coluna), mesmo que isso signifique transbordar o Contêiner Flex. A propriedade flex-wrap é aplicada ao Contêiner Flex e permite que você controle esse comportamento, fazendo com que os itens "quebrem" para a próxima linha (ou coluna) quando o espaço se torna insuficiente.

Pense no flex-wrap como a "política de empacotamento" de uma caixa. Se você está colocando vários objetos (flex-items) em uma caixa (flex-container):

• nowrap é como tentar enfiar tudo na mesma camada, mesmo que transborde.
• wrap é como começar uma nova camada quando a primeira está cheia.
• wrap-reverse é como começar uma nova camada, mas de baixo para cima.

Valores da Propriedade flex-wrap

A propriedade flex-wrap aceita os seguintes valores:

1. nowrap (padrão):

   • Os Itens Flex tentarão se manter em uma única linha (ou coluna), mesmo que isso cause um transbordamento do contêiner. Os itens podem encolher para tentar caber, mas não quebrarão.

2. wrap:

   • Os Itens Flex quebrarão para a próxima linha (ou coluna) quando não houver espaço suficiente no contêiner. As novas linhas (ou colunas) são adicionadas na direção do eixo cruzado.

3. wrap-reverse:

   • Os Itens Flex quebrarão para a próxima linha (ou coluna), mas na direção inversa do eixo cruzado. Ou seja, se o eixo cruzado é vertical (para flex-direction: row;), as novas linhas aparecerão acima da linha anterior.

flex-wrap e o Eixo Cruzado

Quando flex-wrap: wrap; ou wrap-reverse; é usado, o Contêiner Flex pode ter múltiplas linhas (ou colunas) de itens. Isso é importante porque a propriedade align-content (que veremos em uma lição futura) é usada para alinhar essas múltiplas linhas (ou colunas) entre si.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Flex-wrap</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;
      min-height: 120px; /* Altura mínima para visualização */
      margin-bottom: 20px;
      width: 300px; /* Largura limitada para forçar a quebra */
    }

    .flex-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      margin: 5px;
      color: #333;
      font-weight: bold;
      text-align: center;
      width: 100px; /* Largura fixa para os itens */
      height: 60px; /* Altura fixa para os itens */
      line-height: 60px; /* Para centralizar texto verticalmente */
      flex-shrink: 0; /* Impede que os itens encolham para demonstrar o wrap */
    }

    /* --- Exemplos de flex-wrap --- */

    .container-nowrap {
      flex-wrap: nowrap; /* Padrão */
    }

    .container-wrap {
      flex-wrap: wrap;
    }

    .container-wrap-reverse {
      flex-wrap: wrap-reverse;
    }

    /* Exemplo com flex-direction: column */
    .container-column-wrap {
      flex-direction: column;
      flex-wrap: wrap;
      height: 200px; /* Altura limitada para forçar a quebra em coluna */
      width: 400px; /* Largura para acomodar as colunas quebradas */
    }
  </style>
</head>
<body>
  <h1>Propriedade `flex-wrap`</h1>

  <h2>`flex-wrap: nowrap` (Padrão)</h2>
  <div class="flex-container container-nowrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
  </div>
  <p>Itens tentam ficar em uma única linha, transbordando o contêiner.</p>

  <h2>`flex-wrap: wrap`</h2>
  <div class="flex-container container-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
  </div>
  <p>Itens quebram para a próxima linha quando não há espaço.</p>

  <h2>`flex-wrap: wrap-reverse`</h2>
  <div class="flex-container container-wrap-reverse">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
  </div>
  <p>Itens quebram para a próxima linha, mas na ordem inversa (de baixo para cima).</p>

  <h2>`flex-wrap` com `flex-direction: column`</h2>
  <div class="flex-container container-column-wrap">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
  </div>
  <p>Itens quebram para a próxima coluna quando não há espaço vertical suficiente.</p>
</body>
</html>

Resultado:

• Você verá como os itens se comportam quando o contêiner tem uma largura (ou altura, para column) limitada.
• Com nowrap, os itens podem transbordar.
• Com wrap, os itens se organizam em múltiplas linhas (ou colunas).
• Com wrap-reverse, a ordem das linhas (ou colunas) é invertida.

Boas Práticas:

• Responsividade: flex-wrap: wrap; é fundamental para criar layouts responsivos, permitindo que os itens se ajustem dinamicamente ao espaço disponível.
• Controle de Espaço: Use flex-wrap em conjunto com justify-content e align-items para ter controle total sobre como os itens são distribuídos e alinhados em layouts de múltiplas linhas.
• wrap-reverse com Cautela: Assim como flex-direction: *-reverse, wrap-reverse pode ter implicações para a acessibilidade, pois a ordem visual das linhas é invertida.

Dominar flex-wrap é essencial para criar layouts Flexbox que se adaptam bem a diferentes tamanhos de tela e que podem acomodar um número variável de itens.