O que é Flexbox e como você centraliza conteúdo com ele?

Question

Accepted Answer

**Flexbox** é um sistema de layout unidimensional — ele organiza itens em uma única **linha** ou **coluna** e distribui espaço ao longo dessa linha. É a resposta moderna para problemas de alinhamento e espaçamento que costumavam exigir floats e gambiarras.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## Os dois eixos

Flexbox tem um **eixo principal** (a direção em que os itens fluem) e um **eixo transversal** (perpendicular). As propriedades mapeiam para eles:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Centralização perfeita — o caso de uso famoso

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Essas três linhas centralizam um filho horizontal e verticalmente — uma tarefa que era notoriamente difícil antes do Flexbox.

## Padrões comuns

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

As opções de `justify-content` incluem `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Por que isso importa

Flexbox é a ferramenta do dia a dia para navbars, grupos de botões, linhas de cartões, centralização e qualquer layout de "linha de itens".

Compreender o modelo de eixo principal/transversal (e que `justify-content`/`align-items` trocam de significado quando você muda `flex-direction`) é o modelo mental fundamental.

Use Flexbox para layouts 1D e Grid para 2D.