Múltiples líneas: flex-wrap y align-content

Hasta ahora todos los ítems vivían en una sola línea. ¿Qué pasa cuando no caben? Por defecto, Flexbox los comprime. Con flex-wrap podés cambiar ese comportamiento.

`flex-wrap` — habilitar múltiples líneas

Por defecto, flex-wrap: nowrap fuerza todos los ítems en una sola línea aunque deban encogerse. Con flex-wrap: wrap, los ítems que no caben fluyen a la siguiente línea.

.galeria {
  display: flex;
  flex-wrap: wrap; /* los ítems van a la siguiente línea si no caben */
}

.galeria .tarjeta {
  width: 200px; /* si no caben N tarjetas de 200px, las demás bajan */
}

Valores:

nowrap (por defecto): una sola línea; los ítems se comprimen si es necesario.
wrap: los ítems fluyen a la siguiente línea cuando no caben.
wrap-reverse: igual que wrap pero las líneas se apilan en orden inverso.

`align-content` — distribuir las líneas

align-content controla cómo se distribuyen las líneas de ítems dentro del eje cruzado. Solo tiene efecto cuando hay más de una línea, es decir, cuando flex-wrap: wrap está activo y los ítems efectivamente se envuelven.

.galeria {
  display: flex;
  flex-wrap: wrap;               /* OBLIGATORIO — sin esto, align-content no hace nada */
  align-content: space-between;  /* distribuye el espacio entre líneas */
  height: 400px;                 /* el contenedor necesita altura para que haya espacio */
}

Acepta los mismos valores que justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch.

Diferencia clave con align-items:

align-items alinea los ítems dentro de su línea (en el eje cruzado de cada línea).
align-content distribuye el espacio entre las líneas (en el eje cruzado del contenedor).
En un contenedor de una sola línea: align-items actúa; align-content no hace nada.

La regla Flexbox 1D / Grid 2D

Flexbox es la herramienta para layouts en una dimensión: una fila O una columna. Para layouts en dos dimensiones (filas Y columnas al mismo tiempo), existe CSS Grid (CAT-26 — el próximo módulo).

En la práctica, se usan juntos: Grid para el layout de la página, Flexbox para los componentes internos.

Tu turno: aplicá las propiedades a .galeria. Reducí el ancho de la preview para ver cómo las tarjetas bajan de línea, y comprobá con el botón “Comprobar”.