Varias líneas con flex-wrap

Reprodujimos el diseño de la navegación y después añadimos tres elementos más a la lista. No había espacio suficiente y apareció una barra de desplazamiento horizontal. Además, los últimos elementos sobresalieron de los límites de la navegación. Este comportamiento se llama desbordamiento.

Los elementos suelen desbordarse cuando no se tiene en cuenta que el contenido puede cambiar. Al distribuir los grandes bloques de la página, podíamos contar con que no aparecería un segundo encabezado o pie de página. En cambio, la cantidad de elementos dentro de un componente, como los enlaces de la navegación, casi seguro cambiará. Hay que preverlo.

En nuestra página, los elementos de la lista no cabían a lo ancho. No pasaron a otra línea porque, de forma predeterminada, un contenedor flex tiene una sola línea. Para evitar que los elementos se desborden, debemos permitir varias líneas.

Para ello se usa la propiedad flex-wrap. Su valor predeterminado, nowrap, impide el salto de línea. Si lo cambiamos a wrap, los elementos flex podrán pasar a la siguiente línea.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Añadiremos a la lista navigation-list la propiedad flex-wrap con el valor wrap. Comprobaremos que los elementos pasan a otra línea en lugar de desbordarse.

Después quitaremos el resaltado de las cajas.