Flex

O Tailwind CSS oferece suporte completo ao Flexbox através de classes utilitárias simples e poderosas. O sistema flex permite organizar elementos em linha ou coluna, controlar alinhamento, distribuição e comportamento responsivo com precisão.

Essa abordagem é ideal para criar layouts modulares e adaptáveis sem escrever CSS manual.

---

Ativando o Flex

Para iniciar o uso de Flexbox, adicione a classe flex ao elemento pai. Os filhos serão posicionados conforme a direção e regras definidas.

Copy<div class="flex">
  <div class="bg-blue-200 p-4">Item 1</div>
  <div class="bg-blue-300 p-4">Item 2</div>
</div>

---

Direção (flex-row, flex-col)

Define se os elementos filhos ficarão lado a lado (linha) ou empilhados (coluna).

Copy<!-- Horizontal (padrão) -->
<div class="flex flex-row gap-4">
  <div class="bg-gray-200 p-4">A</div>
  <div class="bg-gray-300 p-4">B</div>
</div>

<!-- Vertical -->
<div class="flex flex-col gap-4 mt-6">
  <div class="bg-gray-200 p-4">A</div>
  <div class="bg-gray-300 p-4">B</div>
</div>

---

Alinhamento de itens

Alinhamento no eixo principal (justify-*)

Controla a distribuição dos elementos:

• justify-start

• justify-center

• justify-between

• justify-around

• justify-end

Copy<div class="flex justify-between">
  <span>Esquerda</span>
  <span>Centro</span>
  <span>Direita</span>
</div>

---

Alinhamento no eixo cruzado (items-*)

Controla o alinhamento vertical (em uma flex-row) ou horizontal (em uma flex-col):

• items-start

• items-center

• items-end

• items-stretch

• items-baseline

Copy<div class="flex items-center h-32">
  <div class="bg-green-200 p-2">Item</div>
</div>

---

Controle de crescimento (flex-*)

• flex-none: não cresce nem encolhe

• flex-1: ocupa o máximo de espaço disponível

• flex-auto: cresce conforme o conteúdo permite

Copy<div class="flex gap-4">
  <div class="flex-1 bg-red-200 p-4">Flex 1</div>
  <div class="flex-none bg-red-300 p-4 w-32">Fixado</div>
</div>

---

Envelopamento (flex-wrap)

Permite que os itens quebrem para a próxima linha quando o espaço for insuficiente:

Copy<div class="flex flex-wrap gap-2">
  <span class="bg-blue-100 p-2">Tag 1</span>
  <span class="bg-blue-100 p-2">Tag 2</span>
  <span class="bg-blue-100 p-2">Tag 3</span>
  <span class="bg-blue-100 p-2">Tag 4</span>
</div>

---

Aplicação com responsividade

Copy<div class="flex flex-col md:flex-row gap-6">
  <div class="flex-1 bg-gray-100 p-4">Conteúdo A</div>
  <div class="flex-1 bg-gray-200 p-4">Conteúdo B</div>
</div>

Neste exemplo:

• No mobile: os itens ficam empilhados (flex-col)

• A partir de md: ficam lado a lado (flex-row)

---

O sistema de Flexbox do Tailwind é ideal para construir seções, agrupamentos e estruturas reativas com pouco esforço.