5.8 Flexbox

Flexbox

Permite organizar elementos de forma flexível e responsiva.

cssCopiar código.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

🔹 Quando usar? ✔️ Alinhar itens em uma direção (linha ou coluna) ✔️ Distribuir espaços uniformemente ✔️ Criar layouts responsivos sem cálculos complexos

---

⚡ Ativação do Flexbox

cssCopyDownload

.container {
  display: flex; /* ✨ Ativa o Flexbox! */
}

---

🛠️ Propriedades Principais

1️⃣ Direção do Layout (flex-direction)

Define se os itens ficam em linha (row) ou coluna (column).

Valor	Descrição
row (padrão)	→ Itens na horizontal
column	↓ Itens na vertical
row-reverse	← Itens na horizontal (invertido)
column-reverse	↑ Itens na vertical (invertido)

📌 Exemplo:

cssCopyDownload

.container {
  display: flex;
  flex-direction: row; /* Padrão (→) */
  /* flex-direction: column; (↓) */
}

---

2️⃣ Alinhamento (justify-content e align-items)

↕️ justify-content (alinhamento horizontal se flex-direction: row)

Valor	Efeito
flex-start	Alinha à esquerda (padrão)
flex-end	Alinha à direita
center	Centraliza
space-between	Espaço igual entre itens
space-around	Espaço ao redor dos itens

↔️ align-items (alinhamento vertical se flex-direction: row)

Valor	Efeito
flex-start	Topo
flex-end	Base
center	Meio
stretch	Estica (padrão)

📌 Exemplo:

cssCopyDownload

.container {
  display: flex;
  justify-content: center; /* ↔️ Centraliza horizontalmente */
  align-items: center; /* ↕️ Centraliza verticalmente */
}

---

3️⃣ Quebra de Linha (flex-wrap)

Controla se os itens quebram para a próxima linha quando não cabem.

Valor	Descrição
nowrap (padrão)	Não quebra (itens encolhem)
wrap	Quebra em múltiplas linhas
wrap-reverse	Quebra invertido

📌 Exemplo:

cssCopyDownload

.container {
  display: flex;
  flex-wrap: wrap; /* Quebra itens em várias linhas */
}

---

4️⃣ Crescimento e Encolhimento (flex-grow, flex-shrink, flex-basis)

• flex-grow: Define quanto um item cresce em relação aos outros.

• flex-shrink: Define quanto um item encolhe em relação aos outros.

• flex-basis: Tamanho inicial antes do espaço ser distribuído.

📌 Exemplo:

cssCopyDownload

.item-1 {
  flex: 1; /* flex-grow: 1 | flex-shrink: 1 | flex-basis: 0% */
}
.item-2 {
  flex: 2; /* Cresce 2x mais que item-1 */
}

---

🏆 Exemplo Prático (Menu Responsivo)

htmlCopyDownloadRun

<nav class="menu">
  <div class="logo">🔴 Logo</div>
  <div class="item">📁 Início</div>
  <div class="item">📂 Sobre</div>
  <div class="item">📄 Contato</div>
</nav>

cssCopyDownload

.menu {
  display: flex; /* Ativa Flexbox */
  justify-content: space-between; /* Itens espaçados */
  align-items: center; /* Centraliza verticalmente */
  background: #333;
  color: white;
  padding: 10px;
}

.logo {
  font-weight: bold;
}

.item {
  padding: 8px 12px;
}

/* Responsivo: Quebra em coluna em telas pequenas */
@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
}