Gap y wrap

Cuando la fila se queda sin sitio

Ya sabes poner elementos uno al lado del otro. Fantástico. Pero ahora imagina que tienes cinco tarjetas y solo caben tres en la fila. ¿Qué hace Flexbox por defecto?

Las aprieta. Las encoge. Las apretuja como pasajeros en un metro a las ocho de la mañana, hasta que entren todas en una sola línea, aunque queden incómodas.

Si encima las tarjetas no pueden encogerse más, alguna empieza a desbordar el contenedor y el diseño se rompe.

Aquí entran dos herramientas que hacen que Flexbox pase de útil a comodísimo:

• gap: para separar elementos.
• flex-wrap: para permitir que salten de línea cuando ya no caben.

gap: espacio sin trucos raros

Antes, la única forma de separar elementos en una fila era darles márgenes individuales: margin-right: 20px a cada uno, y luego acordarse de quitárselo al último para que no sobrara espacio. Funcionaba, pero era incómodo y propenso a errores.

Con Flexbox, todo eso desaparece. Le pides al padre que ponga aire entre sus hijos:

Y CSS deja 20 píxeles de espacio entre los hijos. Limpio, directo y sin malabares.

Lo importante: gap solo separa entre elementos. No añade espacio al principio ni al final del contenedor. Justo lo que casi siempre quieres.

flex-wrap: deja que respiren

Por defecto, Flexbox intenta meter todos los hijos en una sola línea. Aunque no quepan. Aunque sufran. Aunque el diseño pida ayuda a gritos. A esta regla por defecto se le llama flex-wrap: nowrap, y no se nota porque ya viene activada.

Para romper esa regla y permitir saltos de línea, hay que decirlo explícitamente:

Con eso, los elementos pueden saltar a la línea siguiente cuando ya no entra ni uno más. Si el contenedor se hace más estrecho, suben otros. Si se hace más ancho, vuelven a subir. Es responsive sin esfuerzo.

Juntas funcionan mejor

Cuando combinas las tres propiedades en el mismo contenedor:

obtienes una galería flexible, ordenada y con respiración visual:

• Los elementos se colocan en fila mientras quepan.
• Cuando no caben, bajan a la siguiente línea automáticamente.
• Entre cada elemento (en horizontal y en vertical) hay 20 píxeles de aire.

Muy poca gente extraña los viejos hacks después de probar esto. Esta combinación es la base de la mayoría de galerías, listas de tarjetas y rejillas simples que ves por la web.

Tu desafío 🚀

Haz que .galeria use display: flex, flex-wrap: wrap y gap: 20px. Observa cómo los cinco elementos se acomodan solos según el espacio disponible.

Ahora tus elementos no solo se alinean: también saben adaptarse...