Pular para conteúdo

Aula 12 - Flexbox 📐

Alinhamento Flexível e Moderno

👋 Olá!

Você já tentou centralizar um elemento e ele simplesmente se recusou?

Hoje, seus problemas de alinhamento acabam com o Flexbox! 🚀

Agenda de Hoje 📅

  1. O que é Flexbox?
  2. Flex Container vs Flex Items
  3. O Eixo Principal (Justify)
  4. O Eixo Secundário (Align)
  5. A Direção (Row vs Column)
  6. Quebra de Linha (Wrap)

📐 1. O que é Flexbox?

  • Modelo de layout de uma dimensão.
  • Excelente para alinhar itens em linha ou coluna.
  • Substitui técnicas antigas e complicadas.

📦 2. A Hierarquia Flex

Flex Container (Pai) 👨

  • É quem recebe o comando display: flex;.
  • Ele controla como seus filhos se comportam.

Flex Items (Filhos) 🧒

  • São os elementos diretos dentro do container.
  • Tornam-se automaticamente "flexíveis".

📊 Estrutura Flex

graph TD
    P[Flex Container - display: flex] --> I1[Item 1]
    P --> I2[Item 2]
    P --> I3[Item 3]

↔️ 3. Justify Content

Alinhamento no Eixo Principal.

Opções do Justify 🎛️

  • flex-start: No início.
  • center: No meio.
  • flex-end: No final.

Espaçamento Inteligente 🧠

  • space-between: Espaço entre eles.
  • space-around: Espaço ao redor.

↕️ 4. Align Items

Alinhamento no Eixo Secundário (Vertical).

Opções do Align 🎛️

  • flex-start: No topo.
  • center: No meio vertical.
  • flex-end: Na base.
  • stretch: Estica para ocupar tudo.

📐 5. Centralização Perfeita

O "Santo Graal" do CSS!

.pai {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

🔄 6. Flex Direction

  • Muda a direção dos itens.
  • row: Linha (padrão).
  • column: Coluna (empilhados).

🌯 7. Flex Wrap

  • Define se os itens podem pular de linha.
  • nowrap: Tudo esmagado em uma linha (padrão).
  • wrap: Pula de linha se não houver espaço.

🕵️‍♂️ Resumo da Aula ✅

  • display: flex ativa o modo flexível.
  • justify-content para horizontal (geralmente).
  • align-items para vertical (geralmente).
  • flex-direction para mudar de linha para coluna.

Próxima Aula 🏁

Grid Layout

Para quando você precisar de um layout em duas dimensões (X e Y)!

Dúvidas? 🤔

"Flexbox é como plasticina: você pode esticar, alinhar e moldar o layout como quiser."