Wrap

Cuando creamos un contenedor y le añadimos ítems, nos podemos encontrar que no tengamos espacio suficiente para todos. Para estas situaciones, tenemos que decidir qué comportamiento seguir.

Con flexbox, podemos utilizar la siguiente propiedad:

flex-wrap: wrap;

La propiedad acepta los siguientes valores:

• nowrap: indicamos al navegador que no cree nuevas filas. El texto se salirá del contenedor. Como diseñadores decidimos si después queremos ocultar el texto que se sale.
• wrap: si no entran los elementos, el contenedor va creando nuevas filas.
• wrap-reverse: igual que wrap, pero igual que crearse en orden lógico (se añaden filas abajo), los elementos wrapeados pasarían a estar arriba.