Diseño · Guía práctica
Permitir que una fila de tarjetas se reparta no es lo mismo que reducirlas hasta que quepan
La propiedad flex-wrap decide si un contenedor flexible mantiene una línea o admite varias.
MDN documenta flex-wrap como la propiedad de CSS que controla si los elementos de un contenedor flexible permanecen en una línea o pueden repartirse en varias. Su valor inicial es nowrap. Una fila que parece correcta en una pantalla ancha puede exigir otra decisión al disponer de menos espacio.
Modelo de diseño ficticio: tres tarjetas tienen una base de doscientos píxeles y no pueden encogerse, y los dos huecos intermedios miden dieciséis. Juntas requieren 632 píxeles antes de añadir bordes u otras medidas. En un área de quinientos no caben las tres bajo esas condiciones; cambiar el color o centrar la fila no elimina esa suma.
Con un contenedor display:flex y flex-wrap:wrap se permite crear nuevas líneas. Para conservar las condiciones del ejercicio puede usarse en las tarjetas flex:0 0 200px y un gap de 16px en el contenedor. Es un ejemplo propio propuesto para probar, no una demostración ejecutada en todos los navegadores.
La ficha de comparación debe anotar ancho del contenedor, base de las tarjetas, posibilidad de encogimiento y huecos. Si se permite flex-shrink en otra versión, el resultado ya no está sujeto al mismo supuesto numérico. Por eso no basta con observar que una versión tiene una línea y otra dos para concluir cuál está mal.
Revisa después el contenido real: textos largos, imágenes y orden de lectura pueden cambiar la experiencia. El ajuste de líneas no garantiza legibilidad ni resuelve por sí solo toda adaptación móvil. Esta guía ofrece una comprobación geométrica y una propiedad concreta para discutir el diseño sin inventar pruebas realizadas en dispositivos.
Comprobación práctica
- Suma tarjetas y huecos
- Comprueba si pueden encoger
- Decide una línea o varias
- Revisa texto y orden de lectura