# 5.8 Flexbox

**Flexbox**

Permite organizar elementos de forma flexível e responsiva.

```css
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;
  }
}
```