¿Qué es Flexbox y cómo centras contenido con él?

Question

Accepted Answer

**Flexbox** es un sistema de diseño unidimensional — organiza elementos en una única **fila** o **columna** y distribuye el espacio a lo largo de esa línea. Es la respuesta moderna a los problemas de alineación y espaciado que antes requerían floats y trucos.

```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) */
}
```

## Los dos ejes

Flexbox tiene un **eje principal** (la dirección en que fluyen los elementos) y un **eje transversal** (perpendicular). Las propiedades se asignan a ellos:

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

## Centrado perfecto — el caso de uso famoso

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

Estas tres líneas centran un elemento secundario horizontal y verticalmente — una tarea que era notoriamente difícil antes de Flexbox.

## Patrones comunes

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

Las opciones de `justify-content` incluyen `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Por qué es importante

Flexbox es la herramienta cotidiana para barras de navegación, grupos de botones, filas de tarjetas, centrado y cualquier diseño de "línea de elementos".

Comprender el modelo de eje principal/transversal (y que `justify-content`/`align-items` intercambian significado cuando cambias `flex-direction`) es el modelo mental clave.

Usa Flexbox para diseños 1D y Grid para 2D.