La propiedad flex-wrap de CSS especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas.
Valores
nowrap
Los elementos flex (hijos) son distribuidos en una sola línea, lo cual puede llevar al re dimensionamiento del ancho del elemento.
El ancho real del elemento hijo es de 150px, y el del padre de 400px, si hacemos la suma vemos que los elementos hijos no caben en el padre, por eso es que como tenemos la propiedad flex-wrap con su valor nowrap le estamos diciendo que los conserve en una sola linea pero como no caben los re dimensiona y su ancho en el navegador sera de 109.328 px.
¿Cómo lo se? voy al navegador, sobre la visualización presiono el botón derecho y ahí en visualización. En la ventana presiono en Elemento y selecciono el div presionando en los tres puntos.
wrap
Los elementos flex (hijos) son colocados en varias líneas.
El ancho real del elemento hijo se conserva, porque al hacerse el tamaño del padre mas pequeño la propiedad flex,wrap con su valor wrap respeta la medida en px de los hijos, y si no caben en una linea los pone en la siguiente.
wrap-reverse
Actúa como wrap pero cross-start y cross-end están intercambiados.
