Propriedade flex-basis: Definindo o tamanho inicial do item

Estabeleça o tamanho base de um item flex antes de crescer ou encolher.

A propriedade flex-basis é aplicada diretamente aos Itens Flex e define o tamanho inicial de um item antes que o espaço restante no Contêiner Flex seja distribuído. Pense nela como a "largura preferencial" (ou altura, se flex-direction: column;) de um item.

Ela é o ponto de partida para o cálculo do tamanho final do item, que será ajustado posteriormente por flex-grow (se houver espaço extra) ou flex-shrink (se não houver espaço suficiente).

Pense no flex-basis como o "tamanho ideal" que você gostaria que cada Item Flex tivesse. É como dizer: "Eu gostaria que este item tivesse 100px de largura, e a partir daí, ele pode crescer ou encolher se precisar."

Como funciona flex-basis

  • Valor Padrão: O valor padrão de flex-basis é auto. Quando flex-basis: auto;, o navegador verifica se o item tem uma width (ou height) definida. Se tiver, ele usa essa dimensão. Se não tiver, ele usa o tamanho do conteúdo do item.
  • Unidades de Medida: Você pode usar qualquer unidade de medida CSS válida (pixels, porcentagens, em, rem, etc.), assim como faria com width ou height.
  • Prioridade:
    • Se flex-basis for definido com um valor diferente de auto (ex: flex-basis: 100px;), ele terá prioridade sobre a propriedade width (ou height) do item no contexto Flexbox.
    • Se flex-basis: auto; e o item tiver width: 100px;, então 100px será o tamanho inicial.
    • Se flex-basis: auto; e o item não tiver width, o tamanho inicial será o tamanho do conteúdo.

Importante: flex-basis afeta o tamanho do item ao longo do eixo principal.

  • Se flex-direction: row;, flex-basis controla a largura do item.
  • Se flex-direction: column;, flex-basis controla a altura do item.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Propriedade Flex-basis</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;
      flex-grow: 0; /* Para focar no flex-basis */
      flex-shrink: 0; /* Para focar no flex-basis */
    }

    /* --- Exemplos de flex-basis --- */

    .basis-auto {
      flex-basis: auto; /* Padrão. Usará a width: 120px */
      width: 120px;
      background-color: lightcoral;
    }

    .basis-100px {
      flex-basis: 100px; /* Sobrescreve a width */
      width: 150px; /* Esta width será ignorada pelo flex-basis */
      background-color: lightgreen;
    }

    .basis-20percent {
      flex-basis: 20%; /* 20% da largura do contêiner */
      background-color: lightgoldenrodyellow;
    }

    .basis-content {
      flex-basis: content; /* Ajusta-se ao tamanho do conteúdo */
      width: 200px; /* Esta width será ignorada */
      background-color: lightsalmon;
    }

    /* Exemplo com flex-direction: column */
    .container-column {
      flex-direction: column;
      height: 300px; /* Altura para ver o efeito */
      width: 150px;
    }
    .container-column .flex-item {
      height: auto; /* Para focar no flex-basis vertical */
      width: auto;
    }
    .container-column .basis-100px {
      flex-basis: 100px; /* Controla a altura do item */
    }
    .container-column .basis-20percent {
      flex-basis: 20%; /* 20% da altura do contêiner */
    }
  </style>
</head>
<body>
  <h1>Propriedade `flex-basis`</h1>

  <h2>Exemplo 1: `flex-basis: auto` (com `width` definida)</h2>
  <div class="flex-container">
    <div class="flex-item basis-auto">Item 1 (basis: auto, width: 120px)</div>
    <div class="flex-item basis-auto">Item 2 (basis: auto, width: 120px)</div>
  </div>
  <p>Os itens usam sua `width` definida como tamanho inicial.</p>

  <h2>Exemplo 2: `flex-basis` com valor explícito (sobrescrevendo `width`)</h2>
  <div class="flex-container">
    <div class="flex-item basis-100px">Item 1 (basis: 100px, width: 150px)</div>
    <div class="flex-item basis-100px">Item 2 (basis: 100px, width: 150px)</div>
  </div>
  <p>Os itens usam `flex-basis: 100px;` como tamanho inicial, ignorando a `width: 150px;`.</p>

  <h2>Exemplo 3: `flex-basis` em porcentagem</h2>
  <div class="flex-container">
    <div class="flex-item basis-20percent">Item 1 (basis: 20%)</div>
    <div class="flex-item basis-20percent">Item 2 (basis: 20%)</div>
    <div class="flex-item basis-20percent">Item 3 (basis: 20%)</div>
  </div>
  <p>Cada item ocupa 20% da largura do contêiner como tamanho inicial.</p>

  <h2>Exemplo 4: `flex-basis: content`</h2>
  <div class="flex-container">
    <div class="flex-item basis-content">Item Curto</div>
    <div class="flex-item basis-content">Item com Conteúdo Mais Longo</div>
    <div class="flex-item basis-content">Item</div>
  </div>
  <p>Os itens ajustam seu tamanho inicial ao tamanho do seu conteúdo.</p>

  <h2>Exemplo 5: `flex-basis` com `flex-direction: column`</h2>
  <div class="flex-container container-column">
    <div class="flex-item basis-100px">Item 1 (basis: 100px)</div>
    <div class="flex-item basis-20percent">Item 2 (basis: 20%)</div>
  </div>
  <p>Aqui, `flex-basis` controla a altura inicial dos itens.</p>
</body>
</html>

Resultado:

  • Você verá como flex-basis define o tamanho inicial dos itens, e como ele pode sobrescrever width (ou height) no contexto Flexbox.
  • Observe o comportamento de flex-basis: content; ajustando o tamanho ao conteúdo.
  • Veja como flex-basis controla a largura em row e a altura em column.

Boas Práticas:

  • Ponto de Partida: flex-basis é o ponto de partida para o cálculo do tamanho do item. Ele é o "tamanho ideal" antes que flex-grow ou flex-shrink entrem em ação.
  • Prioridade sobre width/height: 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.
  • flex-basis: content;: É um valor muito útil para que os itens se ajustem automaticamente ao tamanho de seu conteúdo, e depois cresçam ou encolham a partir daí.
  • Combinação com flex-grow e flex-shrink: flex-basis é quase sempre usado em conjunto com flex-grow e flex-shrink para criar layouts verdadeiramente flexíveis.

Dominar flex-basis é essencial para ter controle preciso sobre o tamanho inicial dos seus Itens Flex, permitindo que eles se adaptem de forma inteligente ao espaço disponível no contêiner.