> For the complete documentation index, see [llms.txt](https://favelaware.gitbook.io/favelaware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://favelaware.gitbook.io/favelaware/5-css/5.8-flexbox.md).

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://favelaware.gitbook.io/favelaware/5-css/5.8-flexbox.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.