flex-wrap, align-content y gap

Por defecto, un contenedor flex mete TODOS los ítems en una sola línea aunque revienten. Hoy le enseñas a doblar (wrap), a gobernar el espacio entre las líneas resultantes (align-content) y a separar todo con la propiedad más querida del CSS moderno: gap.

flex-wrap: permiso para doblar

Con nowrap (default), los ítems se encogen (flex-shrink) hasta el límite y luego desbordan. Con wrap, el ítem que no cabe salta a una línea nueva — y cada línea se comporta como su propio mini-contenedor: justify-content aplica línea por línea.

gap: la separación moderna

Antes de gap: márgenes en cada ítem más trucos para anular el del último. Ahora:

<div class="galeria">
<div class="tarjeta">1</div><div class="tarjeta">2</div><div class="tarjeta">3</div>
<div class="tarjeta">4</div><div class="tarjeta">5</div><div class="tarjeta">6</div>
<div class="tarjeta">7</div><div class="tarjeta">8</div>
</div>

body { font-family: system-ui; padding: 20px; }
.galeria { display: flex; flex-wrap: wrap; gap: 12px; background: #f1f5f9; border-radius: 10px; padding: 12px; }
.tarjeta { background: #6d28d9; color: white; border-radius: 8px; padding: 20px 28px; font-weight: 700; }

Angosta la vista previa: las tarjetas doblan solas, siempre separadas por 12px exactos. Cero media queries — este es el corazón de los layouts "intrínsecamente responsivos" que verás en el módulo 8.

align-content: alinear las LÍNEAS

Aquí la confusión clásica de Flexbox, resuelta de una vez:

• align-items: alinea los ítems DENTRO de su línea (eje cruzado).
• align-content: cuando hay VARIAS líneas (wrap activo) y sobra espacio vertical, reparte las líneas como bloque: flex-start, center, space-between... Con una sola línea, no hace nada.

<p class="t">align-content: space-between (las líneas a los extremos)</p>
<div class="alta">
<div class="i">1</div><div class="i">2</div><div class="i">3</div>
<div class="i">4</div><div class="i">5</div>
</div>

body { font-family: system-ui; padding: 20px; }
.t { font-size: 12px; color: #64748b; margin: 0 0 4px; }
.alta {
display: flex; flex-wrap: wrap; gap: 8px;
align-content: space-between;
height: 200px; width: 260px;
background: #f1f5f9; border-radius: 10px; padding: 10px;
}
.i { background: #6d28d9; color: white; border-radius: 6px; padding: 10px 18px; font-weight: 600; }

Mini-reto

Convierte la sección "Más noticias" de tu periódico en una galería flex con wrap y gap: cada article como tarjeta de ~250px (usa flex-basis). Angosta la ventana y verifica que doblan limpiamente de 3 a 2 a 1 columna.

Qué sigue

Ya controlas contenedor, ítems y multilíneas. Falta el toque fino: las excepciones — order y align-self, para cuando UN ítem necesita romper la regla del grupo.