Shorthand flex: Atalho para flex-grow, flex-shrink e flex-basis

Simplifique a definição das propriedades de flexibilidade dos itens.

Assim como flex-flow é um atalho para flex-direction e flex-wrap, a propriedade flex é um shorthand para as três propriedades mais importantes que controlam o comportamento de dimensionamento dos Itens Flex: flex-grow, flex-shrink e flex-basis.

Usar o shorthand flex é uma prática comum e recomendada, pois ele permite definir a flexibilidade completa de um item em uma única linha de código, tornando-o mais conciso e, uma vez compreendido, mais legível.

Pense no shorthand flex como um "pacote completo de flexibilidade" para cada Item Flex. Em vez de dizer individualmente "você pode crescer", "você pode encolher" e "seu tamanho inicial é X", você pode dizer tudo de uma vez: "sua flexibilidade é Y".

Como funciona o shorthand flex

A propriedade flex é aplicada aos Itens Flex e aceita de um a três valores, na seguinte ordem:

.flex-item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

Valores e Comportamentos Comuns:

  1. flex: none;

    • Equivalente a: flex-grow: 0; flex-shrink: 0; flex-basis: auto;
    • O item não cresce e não encolhe. Ele mantém seu tamanho original (definido por width/height ou flex-basis: auto;).

  2. flex: auto;

    • Equivalente a: flex-grow: 1; flex-shrink: 1; flex-basis: auto;
    • O item pode crescer e pode encolher. Ele usa seu tamanho original como base e se adapta ao espaço disponível.

  3. flex: 0;

    • Equivalente a: flex-grow: 0; flex-shrink: 1; flex-basis: 0%;
    • O item não cresce, pode encolher e tem um tamanho inicial de 0%. Isso é útil para criar layouts onde os itens devem ter um tamanho mínimo zero e depois crescer.

  4. flex: 1; (ou qualquer número positivo, ex: flex: 2;)

    • Equivalente a: flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
    • O item pode crescer (com fator 1), pode encolher (com fator 1) e tem um tamanho inicial de 0%. Este é um dos valores mais comuns para itens que devem preencher o espaço disponível.

  5. flex: <flex-grow>; (apenas um número)

    • Se você fornecer apenas um número, ele será interpretado como flex-grow.
    • Ex: flex: 1; (equivale a flex-grow: 1; flex-shrink: 1; flex-basis: 0%;)
    • Cuidado: Este é um caso especial. Se você fornecer apenas um número, flex-shrink será 1 e flex-basis será 0%.

  6. flex: <flex-basis>; (apenas uma unidade de medida, ex: flex: 100px;)

    • Se você fornecer apenas uma unidade de medida, ela será interpretada como flex-basis.
    • Ex: flex: 100px; (equivale a flex-grow: 1; flex-shrink: 1; flex-basis: 100px;)
    • Cuidado: Este é outro caso especial. Se você fornecer apenas uma unidade de medida, flex-grow será 1 e flex-shrink será 1.

  7. flex: <flex-grow> <flex-basis>; (dois valores, um número e uma unidade)

    • Ex: flex: 1 200px; (equivale a flex-grow: 1; flex-shrink: 1; flex-basis: 200px;)
    • Cuidado: Se você fornecer dois valores, o primeiro é flex-grow, o segundo é flex-basis, e flex-shrink será 1.

  8. flex: <flex-grow> <flex-shrink>; (dois números)

    • Ex: flex: 1 0; (equivale a flex-grow: 1; flex-shrink: 0; flex-basis: 0%;)
    • Cuidado: Se você fornecer dois números, o primeiro é flex-grow, o segundo é flex-shrink, e flex-basis será 0%.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Shorthand Flex</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 ver o efeito de grow/shrink */
    }

    .flex-item {
      background-color: lightblue;
      border: 1px solid blue;
      padding: 15px;
      margin: 5px;
      color: #333;
      font-weight: bold;
      text-align: center;
      line-height: 60px;
      /* width: 100px; */ /* Pode ser sobrescrito por flex-basis */
    }

    /* --- Exemplos de shorthand flex --- */

    .flex-none {
      flex: none; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto; */
      width: 100px; /* Será respeitado */
      background-color: lightcoral;
    }

    .flex-auto {
      flex: auto; /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
      width: 100px; /* Será o ponto de partida */
      background-color: lightgreen;
    }

    .flex-1 {
      flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
      background-color: lightgoldenrodyellow;
    }

    .flex-0 {
      flex: 0; /* flex-grow: 0; flex-shrink: 1; flex-basis: 0%; */
      background-color: lightsalmon;
    }

    .flex-grow-basis {
      flex: 1 150px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 150px; */
      background-color: lightseagreen;
    }

    .flex-grow-shrink-basis {
      flex: 2 0 100px; /* flex-grow: 2; flex-shrink: 0; flex-basis: 100px; */
      background-color: lightsteelblue;
    }
  </style>
</head>
<body>
  <h1>Propriedade `flex` (Shorthand)</h1>

  <h2>`flex: none;` (Não cresce, não encolhe)</h2>
  <div class="flex-container">
    <div class="flex-item flex-none">Item A (flex: none)</div>
    <div class="flex-item flex-none">Item B (flex: none)</div>
    <div class="flex-item flex-none">Item C (flex: none)</div>
  </div>
  <p>Itens mantêm sua largura (100px) e transbordam se o contêiner for pequeno.</p>

  <h2>`flex: auto;` (Cresce e encolhe a partir do tamanho original)</h2>
  <div class="flex-container">
    <div class="flex-item flex-auto">Item A (flex: auto)</div>
    <div class="flex-item flex-auto">Item B (flex: auto)</div>
    <div class="flex-item flex-auto">Item C (flex: auto)</div>
  </div>
  <p>Itens crescem/encolhem a partir de sua largura (100px) para preencher o espaço.</p>

  <h2>`flex: 1;` (Cresce/encolhe a partir de 0%)</h2>
  <div class="flex-container">
    <div class="flex-item flex-1">Item A (flex: 1)</div>
    <div class="flex-item flex-1">Item B (flex: 1)</div>
    <div class="flex-item flex-1">Item C (flex: 1)</div>
  </div>
  <p>Itens crescem/encolhem a partir de um tamanho base de 0%, dividindo o espaço igualmente.</p>

  <h2>`flex: 0;` (Não cresce, encolhe a partir de 0%)</h2>
  <div class="flex-container">
    <div class="flex-item flex-0">Item A (flex: 0)</div>
    <div class="flex-item flex-0">Item B (flex: 0)</div>
    <div class="flex-item flex-0">Item C (flex: 0)</div>
  </div>
  <p>Itens não crescem, mas encolhem a partir de 0% se necessário.</p>

  <h2>`flex: 1 150px;` (grow, basis)</h2>
  <div class="flex-container">
    <div class="flex-item flex-grow-basis">Item A (flex: 1 150px)</div>
    <div class="flex-item flex-grow-basis">Item B (flex: 1 150px)</div>
  </div>
  <p>Itens têm base de 150px, crescem igualmente (shrink padrão 1).</p>

  <h2>`flex: 2 0 100px;` (grow, shrink, basis)</h2>
  <div class="flex-container">
    <div class="flex-item flex-grow-shrink-basis">Item A (flex: 2 0 100px)</div>
    <div class="flex-item flex-grow-shrink-basis">Item B (flex: 2 0 100px)</div>
    <div class="flex-item flex-grow-shrink-basis">Item C (flex: 2 0 100px)</div>
  </div>
  <p>Itens têm base de 100px, crescem com fator 2, mas não encolhem.</p>
</body>
</html>

Resultado:

  • Você verá como os diferentes valores do shorthand flex afetam o crescimento, encolhimento e tamanho inicial dos itens.
  • Observe a diferença entre flex: auto; (que usa o width como base) e flex: 1; (que usa 0% como base).

Boas Práticas:

  • Concisão e Legibilidade: Use o shorthand flex para manter seu código limpo e fácil de entender, especialmente quando você precisa de comportamentos de flexibilidade comuns.
  • Valores Padrão Implícitos: Esteja ciente dos valores padrão que são aplicados quando você omite um ou dois dos valores (flex-grow, flex-shrink, flex-basis). Consulte a documentação ou a tabela de valores comuns para evitar surpresas.
  • flex: 1; vs flex: auto;:
    • flex: 1; é ótimo para itens que devem dividir o espaço igualmente e não se importam em começar com um tamanho zero.
    • flex: auto; é melhor quando você quer que os itens cresçam/encolham a partir de seu tamanho de conteúdo ou de uma width/height definida.
  • Prioridade: Lembre-se que flex-basis (se não for auto) tem prioridade sobre width (ou height) para o tamanho do item ao longo do eixo principal.

Dominar o shorthand flex é um passo crucial para se tornar proficiente em Flexbox, permitindo que você controle o comportamento de dimensionamento dos seus itens de forma eficiente e expressiva.