Propriedade flex-shrink: Fazendo itens 'encolherem'

Controle como os itens se encolhem quando não há espaço suficiente.

Assim como os Itens Flex podem crescer para preencher o espaço extra com flex-grow, eles também podem encolher quando o Contêiner Flex não tem espaço suficiente para todos os itens em seu tamanho original. É para isso que serve a propriedade flex-shrink, aplicada diretamente aos Itens Flex.

Ela define a capacidade de um item flex de "encolher" e ceder espaço quando o conteúdo total dos itens excede o tamanho do contêiner ao longo do eixo principal.

Pense no flex-shrink como a "resistência" de um Item Flex a ser espremido. Um item com flex-shrink: 0; é como um objeto rígido que se recusa a encolher, enquanto um item com flex-shrink: 1; é mais flexível e cederá espaço.

Como funciona flex-shrink

  • Valor Padrão: O valor padrão de flex-shrink para todos os Itens Flex é 1. Isso significa que, por padrão, os itens podem encolher se necessário.
  • 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 encolhimento".
  • Distribuição do Espaço Negativo:
    • Se todos os itens tiverem flex-shrink: 1;, eles encolherão igualmente para evitar o transbordamento.
    • Se um item tiver flex-shrink: 2; e outro tiver flex-shrink: 1;, o primeiro item encolherá o dobro do que o segundo item.

Importante: flex-shrink só tem efeito se houver espaço negativo (ou seja, os itens estão transbordando) no Contêiner Flex ao longo do eixo principal. Se os itens cabem perfeitamente ou há espaço extra, flex-shrink não fará nada.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Flex-shrink</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: 300px; /* Largura limitada para forçar o encolhimento */
      overflow: hidden; /* Para não mostrar o transbordamento */
    }

    .flex-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      margin: 5px;
      color: #333;
      font-weight: bold;
      text-align: center;
      width: 120px; /* Tamanho inicial dos itens (3 itens * 120px = 360px, que é > 300px) */
      line-height: 60px;
      flex-grow: 0; /* Para focar apenas no encolhimento */
    }

    /* --- Exemplos de flex-shrink --- */

    .shrink-0 {
      flex-shrink: 0; /* Não encolhe */
      background-color: lightcoral;
    }

    .shrink-1 {
      flex-shrink: 1; /* Padrão: encolhe */
      background-color: lightgreen;
    }

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

    /* Exemplo com flex-direction: column */
    .container-column {
      flex-direction: column;
      height: 200px; /* Altura limitada para forçar o encolhimento vertical */
      width: 150px;
    }
    .container-column .flex-item {
      height: 80px; /* Altura inicial dos itens (3 itens * 80px = 240px, que é > 200px) */
      width: auto; /* Para focar no encolhimento vertical */
    }
  </style>
</head>
<body>
  <h1>Propriedade `flex-shrink`</h1>

  <h2>Exemplo 1: Itens com `flex-shrink: 0`</h2>
  <div class="flex-container">
    <div class="flex-item shrink-0">Item 1 (shrink: 0)</div>
    <div class="flex-item shrink-0">Item 2 (shrink: 0)</div>
    <div class="flex-item shrink-0">Item 3 (shrink: 0)</div>
  </div>
  <p>Os itens mantêm sua largura de 120px e não encolhem, transbordando o contêiner (o `overflow: hidden;` esconde o transbordamento).</p>

  <h2>Exemplo 2: Todos os itens com `flex-shrink: 1` (Padrão)</h2>
  <div class="flex-container">
    <div class="flex-item shrink-1">Item 1 (shrink: 1)</div>
    <div class="flex-item shrink-1">Item 2 (shrink: 1)</div>
    <div class="flex-item shrink-1">Item 3 (shrink: 1)</div>
  </div>
  <p>Os itens encolhem igualmente para caber no contêiner.</p>

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

  <h2>Exemplo 4: `flex-shrink` com `flex-direction: column`</h2>
  <div class="flex-container container-column">
    <div class="flex-item shrink-1">Item 1 (shrink: 1)</div>
    <div class="flex-item shrink-2">Item 2 (shrink: 2)</div>
    <div class="flex-item shrink-1">Item 3 (shrink: 1)</div>
  </div>
  <p>Os itens encolhem verticalmente para caber no contêiner.</p>
</body>
</html>

Resultado:

  • Você verá como os itens se contraem para caber no espaço limitado, e como a proporção de flex-shrink afeta a quantidade de espaço que cada item cede.
  • No exemplo 1, os itens transbordam (visualmente cortados pelo overflow: hidden;).
  • No exemplo 2, todos os itens encolhem igualmente.
  • No exemplo 3, o item com flex-shrink: 2 fica visivelmente menor.
  • No exemplo 4, o encolhimento ocorre verticalmente.

Boas Práticas:

  • Espaço Negativo: Lembre-se que flex-shrink só funciona se houver espaço negativo (os itens estão transbordando) no contêiner. Se os itens cabem perfeitamente ou há espaço extra, flex-shrink não terá efeito.
  • Proporções: Pense nos valores de flex-shrink como proporções. flex-shrink: 1; em todos os itens é como dizer "divida o espaço negativo igualmente". flex-shrink: 1; 2; 1; é como dizer "divida o espaço negativo em 4 partes, fazendo o primeiro encolher 1 parte, o segundo 2 partes e o terceiro 1 parte".
  • flex-basis: flex-shrink 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-shrink remove o espaço negativo a partir desse tamanho.
  • flex-shrink: 0;: É muito útil quando você tem um item que nunca deve encolher, como um logo ou um ícone, mesmo que o espaço seja limitado.

Dominar flex-shrink é essencial para criar layouts Flexbox que se adaptam de forma inteligente a espaços limitados, garantindo que seus elementos se ajustem sem transbordar ou quebrar o layout.