Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
flex-wrap permite que los elementos pasen a una nueva línea cuando no caben, ideal para galerías y tarjetas responsivas.
Explicación
flex-wrap decide qué pasa cuando los elementos ya no caben en una sola línea:
flex-wrap: nowrapValor por defecto: todos los elementos se aprietan en una sola línea, aunque no quepan.
flex-wrap: wrapPermite que los elementos salten a una nueva línea cuando ya no hay espacio horizontal.
gapDefine el espacio entre elementos, tanto en filas como en columnas cuando hay wrap activado.
Reto rápido
Agrega dos tarjetas más a la galería y observa cómo se acomodan automáticamente en nuevas líneas.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
flex-wrap: wrap junto con un ancho fijo por item (como width: 120px) es un patrón clásico para galerías de tarjetas responsivas sin usar media queries.
Dato extra
La combinación "flex-direction: row; flex-wrap: wrap" tiene un atajo: la propiedad flex-flow: row wrap hace lo mismo en una sola línea.
Error común
Olvidar flex-wrap: wrap y luego intentar arreglar el desbordamiento con media queries complicadas, cuando una sola línea de CSS lo resuelve.
Siguiente paso
Ya dominas Flexbox para una dimensión. Ahora conoce Grid, para diseñar en filas y columnas al mismo tiempo.
Ir a la siguiente lección