EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Layout Flexbox com Tailwind CSS: Contêineres Flexíveis e Controle de Alinhamento

Contêiner Flex e Direção

O Flexbox é um modelo de layout unidimensional. Você cria um contêiner flex com display: flex e usa classes de direção para controlar como os elementos filhos são organizados.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Contêiner Flex e Direção</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-row layout horizontal -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row (padrão)</h3>
      <div class="flex flex-row gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">Item 1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">Item 2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">Item 3</div>
      </div>
    </div>

    <!-- flex-col layout vertical -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-col</h3>
      <div class="flex flex-col gap-4 bg-gray-100 p-4 rounded w-48">
        <div class="bg-green-500 text-white px-4 py-2 rounded text-center">Item 1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded text-center">Item 2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded text-center">Item 3</div>
      </div>
    </div>

    <!-- flex-row-reverse horizontal invertido -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row-reverse</h3>
      <div class="flex flex-row-reverse gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">Item 1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">Item 2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">Item 3</div>
      </div>
    </div>

    <!-- flex-col-reverse vertical invertido -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-col-reverse</h3>
      <div class="flex flex-col-reverse gap-4 bg-gray-100 p-4 rounded w-48">
        <div class="bg-orange-500 text-white px-4 py-2 rounded text-center">Item 1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded text-center">Item 2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded text-center">Item 3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de direção flex:

Classe Valor CSS Descrição
flex-row flex-direction: row Layout horizontal (padrão)
flex-row-reverse flex-direction: row-reverse Layout horizontal invertido
flex-col flex-direction: column Layout vertical
flex-col-reverse flex-direction: column-reverse Layout vertical invertido

CSS Tradicional vs Tailwind A abordagem tradicional requer definir as propriedades display: flex e flex-direction no CSS, enquanto o Tailwind usa nomes de classes como flex, flex-row, flex-col diretamente no HTML.

💡 Dica: flex-row é a direção padrão e pode ser omitida. Após criar um contêiner com flex, os elementos filhos são organizados horizontalmente por padrão.

Quebra Flex (Flex Wrap)

Por padrão, os itens flex são reduzidos para caber no contêiner. Use flex-wrap para permitir que os itens quebrem em múltiplas linhas.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Flex Wrap</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-nowrap sem quebra -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-nowrap (padrão)</h3>
      <div class="flex flex-nowrap gap-4 bg-gray-100 p-4 rounded overflow-x-auto">
        <div class="bg-blue-500 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 4</div>
        <div class="bg-blue-900 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 5</div>
      </div>
    </div>

    <!-- flex-wrap com quebra -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-wrap</h3>
      <div class="flex flex-wrap gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-6 py-4 rounded w-48">Item 1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-48">Item 2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-48">Item 3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-48">Item 4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-48">Item 5</div>
      </div>
    </div>

    <!-- flex-wrap-reverse quebra invertida -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-wrap-reverse</h3>
      <div class="flex flex-wrap-reverse gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-6 py-4 rounded w-48">Item 1</div>
        <div class="bg-purple-600 text-white px-6 py-4 rounded w-48">Item 2</div>
        <div class="bg-purple-700 text-white px-6 py-4 rounded w-48">Item 3</div>
        <div class="bg-purple-800 text-white px-6 py-4 rounded w-48">Item 4</div>
        <div class="bg-purple-900 text-white px-6 py-4 rounded w-48">Item 5</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer definir flex-wrap: wrap no CSS, enquanto o Tailwind usa a classe flex-wrap diretamente. Por padrão, flex-nowrap impede a quebra.

⚠️ Nota: Ao usar flex-nowrap, os itens podem transbordar o contêiner. É recomendado combiná-lo com overflow-x-auto ou usar flex-wrap para permitir a quebra.

Alinhamento do Eixo Principal (justify)

As classes justify-* controlam como os itens flex são alinhados ao longo do eixo principal.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Alinhamento do Eixo Principal</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- justify-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-start</h3>
      <div class="flex justify-start gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-center</h3>
      <div class="flex justify-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-end -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-end</h3>
      <div class="flex justify-end gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-between -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-between</h3>
      <div class="flex justify-between bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-around -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-around</h3>
      <div class="flex justify-around bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-evenly -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-evenly</h3>
      <div class="flex justify-evenly bg-gray-100 p-4 rounded">
        <div class="bg-teal-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-teal-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-teal-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de alinhamento do eixo principal:

Classe Valor CSS Descrição
justify-start justify-content: flex-start Alinhar ao início
justify-center justify-content: center Alinhar ao centro
justify-end justify-content: flex-end Alinhar ao fim
justify-between justify-content: space-between Distribuir com espaçamento igual entre os itens
justify-around justify-content: space-around Espaçamento igual em ambos os lados de cada item
justify-evenly justify-content: space-evenly Espaçamento igual entre todos os itens

CSS Tradicional vs Tailwind A abordagem tradicional requer definir justify-content no CSS, enquanto o Tailwind usa nomes de classes como justify-start, justify-center diretamente. between, around e evenly são três modos de distribuição de espaçamento.

💡 Dica: justify-between é comumente usado em barras de navegação para posicionar o logotipo à esquerda e o menu à direita. justify-center é usado para centralizar conteúdo.

Alinhamento do Eixo Transversal (items)

As classes items-* controlam como os itens flex são alinhados ao longo do eixo transversal.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Alinhamento do Eixo Transversal</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- items-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-start</h3>
      <div class="flex items-start gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">Baixo</div>
        <div class="bg-blue-600 text-white px-4 py-6 rounded">Médio</div>
        <div class="bg-blue-700 text-white px-4 py-8 rounded">Alto</div>
      </div>
    </div>

    <!-- items-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-center</h3>
      <div class="flex items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-green-500 text-white px-4 py-2 rounded">Baixo</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded">Médio</div>
        <div class="bg-green-700 text-white px-4 py-8 rounded">Alto</div>
      </div>
    </div>

    <!-- items-end -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-end</h3>
      <div class="flex items-end gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">Baixo</div>
        <div class="bg-purple-600 text-white px-4 py-6 rounded">Médio</div>
        <div class="bg-purple-700 text-white px-4 py-8 rounded">Alto</div>
      </div>
    </div>

    <!-- items-stretch -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-stretch (padrão)</h3>
      <div class="flex items-stretch gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-orange-500 text-white px-4 rounded flex items-center justify-center">Baixo</div>
        <div class="bg-orange-600 text-white px-4 rounded flex items-center justify-center">Médio</div>
        <div class="bg-orange-700 text-white px-4 rounded flex items-center justify-center">Alto</div>
      </div>
    </div>

    <!-- items-baseline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-baseline</h3>
      <div class="flex items-baseline gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded text-sm">Pequeno</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded text-2xl">Grande</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded text-base">Baseline</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de alinhamento do eixo transversal:

Classe Valor CSS Descrição
items-start align-items: flex-start Alinhar ao início
items-center align-items: center Alinhar ao centro
items-end align-items: flex-end Alinhar ao fim
items-stretch align-items: stretch Esticar para preencher (padrão)
items-baseline align-items: baseline Alinhar pela linha de base

CSS Tradicional vs Tailwind A abordagem tradicional requer definir align-items no CSS, enquanto o Tailwind usa nomes de classes como items-start, items-center diretamente. items-baseline é particularmente útil para alinhar textos com tamanhos de fonte diferentes.

💡 Dica: Combinar items-center com justify-center permite o perfeito centralizado horizontal e vertical.

Alinhamento de Conteúdo (content)

As classes content-* controlam a distribuição de múltiplas linhas de itens flex ao longo do eixo transversal. Elas só têm efeito quando flex-wrap está ativado.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Alinhamento de Conteúdo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- content-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-center</h3>
      <div class="flex flex-wrap content-center gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-blue-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-blue-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>

    <!-- content-between -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-between</h3>
      <div class="flex flex-wrap content-between gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-green-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-green-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>

    <!-- content-around -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-around</h3>
      <div class="flex flex-wrap content-around gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-purple-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-purple-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer definir align-content no CSS, enquanto o Tailwind usa nomes de classes como content-center, content-between diretamente. Esta propriedade só funciona em contêineres flex com múltiplas linhas.

⚠️ Nota: As classes content-* só têm efeito quando flex-wrap está ativado e existem múltiplas linhas. Para layouts de linha única, use items-* para controlar o alinhamento do eixo transversal.

Alinhamento Próprio (self)

As classes self-* permitem que itens flex individuais substituam a configuração items-* do contêiner e controlem independentemente seu próprio alinhamento no eixo transversal.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Alinhamento Próprio</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- self substituindo items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">self substitui a configuração de items</h3>
      <div class="flex items-start gap-4 bg-gray-100 p-4 rounded h-40">
        <div class="bg-blue-500 text-white px-4 py-2 rounded self-start">self-start</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded self-center">self-center</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded self-end">self-end</div>
        <div class="bg-blue-800 text-white px-4 py-2 rounded self-stretch">self-stretch</div>
      </div>
    </div>

    <!-- Aplicação prática -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Aplicação prática: Alinhamento na barra de navegação</h3>
      <div class="flex items-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-600 text-white px-4 py-2 rounded">Logo</div>
        <div class="flex-1 bg-green-500 text-white px-4 py-2 rounded self-start">Menu (alinhado ao topo)</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded self-center">Botão (centralizado)</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de alinhamento próprio:

Classe Valor CSS Descrição
self-auto align-self: auto Herdar configuração do contêiner
self-start align-self: flex-start Alinhar próprio início
self-center align-self: center Centralizar a si mesmo
self-end align-self: flex-end Alinhar próprio fim
self-stretch align-self: stretch Esticar a si mesmo para preencher
self-baseline align-self: baseline Alinhar pela linha de base

CSS Tradicional vs Tailwind A abordagem tradicional requer definir align-self em elementos específicos no CSS, enquanto o Tailwind usa nomes de classes como self-start, self-center diretamente no HTML.

Crescimento e Redução Flex

flex-grow, flex-shrink e flex-1 controlam como os itens flex compartilham o espaço restante.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Crescimento e Redução Flex</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-grow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-grow</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded flex-grow">flex-grow</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">Fixo</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">Fixo</div>
      </div>
    </div>

    <!-- flex-1 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-1 (comumente usado)</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded flex-1">flex-1</div>
      </div>
    </div>

    <!-- flex-auto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-auto</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded flex-auto">flex-auto</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded flex-auto">flex-auto</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">Fixo</div>
      </div>
    </div>

    <!-- flex-none -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-none</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white px-4 py-2 rounded flex-none">flex-none</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded flex-1">flex-1</div>
      </div>
    </div>

    <!-- flex-shrink-0 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-shrink-0 (evitar redução)</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded flex-shrink-0 w-64">Sem redução</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded flex-1">Pode reduzir</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de dimensionamento flex:

Classe Valor CSS Descrição
flex-grow flex-grow: 1 Permitir crescimento
flex-grow-0 flex-grow: 0 Impedir crescimento
flex-shrink flex-shrink: 1 Permitir redução
flex-shrink-0 flex-shrink: 0 Impedir redução
flex-1 flex: 1 1 0% Parte igual do espaço (recomendado)
flex-auto flex: 1 1 auto Parte igual baseada no conteúdo
flex-none flex: none Sem crescimento, sem redução
flex-initial flex: 0 1 auto Estado inicial

CSS Tradicional vs Tailwind A abordagem tradicional requer definir flex-grow, flex-shrink e flex-basis como três propriedades separadas no CSS, enquanto o flex-1 do Tailwind encapsula a configuração mais comum em uma única classe.

💡 Dica: flex-1 é a classe flex mais utilizada, permitindo que os itens compartilhem igualmente o espaço restante. flex-auto leva em conta a largura do conteúdo, sendo adequado quando o conteúdo dos itens varia em comprimento.

Espaçamento com Gap

As classes gap-* controlam o espaçamento entre os itens flex, substituindo a abordagem tradicional com margens.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Espaçamento com Gap</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- gap-4 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-4 (16px)</h3>
      <div class="flex flex-wrap gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-6 py-4 rounded">1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded">2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded">3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded">4</div>
      </div>
    </div>

    <!-- gap-x e gap-y -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-x-8 gap-y-4 (controle separado horizontal e vertical)</h3>
      <div class="flex flex-wrap gap-x-8 gap-y-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-6 py-4 rounded w-32 text-center">1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-32 text-center">2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-32 text-center">3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-32 text-center">4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-32 text-center">5</div>
      </div>
    </div>

    <!-- Diferentes tamanhos de gap -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Diferentes tamanhos de gap</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-2 (8px)</p>
          <div class="flex gap-2 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-6 (24px)</p>
          <div class="flex gap-6 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-10 (40px)</p>
          <div class="flex gap-10 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer definir margin nos elementos filhos, mas o primeiro e o último precisam de tratamento especial. O gap-* do Tailwind define o espaçamento diretamente no contêiner, tratando automaticamente os casos extremos.

💡 Dica: gap-* também funciona com layouts Grid. Use gap-x-* e gap-y-* para controlar o espaçamento horizontal e vertical de forma independente.

Exemplo Abrangente

Combinando todos os conceitos acima, vamos criar um layout Flexbox completo.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo Abrangente de Flexbox</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Barra de navegação -->
    <nav class="bg-white rounded-lg shadow p-4">
      <div class="flex justify-between items-center">
        <div class="text-xl font-bold text-blue-600">Logo</div>
        <div class="hidden md:flex items-center gap-6">
          <a href="#" class="text-gray-600 hover:text-blue-600">Início</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">Produtos</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">Sobre</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">Contato</a>
        </div>
        <button class="bg-blue-600 text-white px-4 py-2 rounded">Entrar</button>
      </div>
    </nav>

    <!-- Seção Hero -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow p-12">
      <div class="flex flex-col md:flex-row items-center gap-8">
        <div class="flex-1">
          <h1 class="text-3xl font-bold text-white mb-4">Bem-vindo ao Flexbox</h1>
          <p class="text-blue-100 mb-6">Um poderoso sistema de layout flexível para criar facilmente páginas responsivas</p>
          <div class="flex gap-4">
            <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">Começar</button>
            <button class="border border-white text-white px-6 py-3 rounded-lg">Saiba Mais</button>
          </div>
        </div>
        <div class="flex-shrink-0">
          <div class="w-48 h-48 bg-white/20 rounded-full flex items-center justify-center">
            <span class="text-6xl">🎯</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Cards de Recursos -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">📐</span>
        </div>
        <h3 class="font-semibold mb-2">Alinhamento Flexível</h3>
        <p class="text-gray-600 text-sm flex-1">Suporta modos de alinhamento no eixo principal, transversal e próprio</p>
      </div>
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">📏</span>
        </div>
        <h3 class="font-semibold mb-2">Dimensionamento Flexível</h3>
        <p class="text-gray-600 text-sm flex-1">Distribuição inteligente de espaço via flex-grow e flex-shrink</p>
      </div>
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">🔄</span>
        </div>
        <h3 class="font-semibold mb-2">Quebra Responsiva</h3>
        <p class="text-gray-600 text-sm flex-1">flex-wrap quebra automaticamente para se adaptar a diferentes tamanhos de tela</p>
      </div>
    </div>

    <!-- Rodapé -->
    <footer class="bg-gray-800 text-white rounded-lg shadow p-6">
      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
        <div class="text-gray-400">&copy; 2024 Exemplo Flexbox</div>
        <div class="flex gap-4">
          <a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a>
          <a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a>
          <a href="#" class="text-gray-400 hover:text-white">Fale Conosco</a>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional requer escrever CSS extenso para barra de navegação, seção hero, grade de cards e outros layouts, enquanto o Tailwind faz o mesmo com classes utilitárias flex diretamente no HTML, reduzindo o código em mais de 60%.

❓ Perguntas Frequentes

P: Qual a diferença entre flex-1 e flex-auto? R: flex-1 é equivalente a flex: 1 1 0% — os itens compartilham espaço a partir de 0%, ignorando a largura do conteúdo. flex-auto é equivalente a flex: 1 1 auto — os itens compartilham espaço com base na largura do conteúdo. Para a maioria dos casos, flex-1 é recomendado.

P: Como controlo o espaçamento entre linhas após o flex-wrap? R: Use as classes content-* (como content-center, content-between) para controlar a distribuição de múltiplas linhas, e combine com gap-* para o espaçamento dos itens. gap-y-* controla especificamente o espaçamento entre linhas.

P: Como faço para centralizar horizontal e verticalmente? R: Use flex items-center justify-center. Esta é a técnica de centralização mais comum com o Flexbox, e é muito mais simples que a abordagem tradicional com margin: auto + position.

P: Qual a diferença entre gap e margin? R: gap é definido no contêiner e trata automaticamente o espaçamento das bordas sem colapso de margens. margin é definido nos elementos filhos e requer tratamento especial para o primeiro/último elemento. gap é a abordagem recomendada.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie uma barra de navegação centralizada horizontalmente usando flex justify-between items-center com o logotipo à esquerda e o menu à direita

  2. ⭐⭐ Crie uma lista responsiva de cards usando flex flex-wrap gap-6 para quebra automática, com os cards usando flex-1 para compartilhar igualmente o espaço

  3. ⭐⭐⭐ Crie uma seção hero completa com título, descrição, botões e uma imagem, usando flex para um layout lado a lado que muda automaticamente para empilhamento vertical no mobile

100%