Flexbox multilinea

El modelo flexbox distribuye sus items o bloques hijo a lo largo de un eje, es una layout unidireccional, no obstante puede que el ancho de la pantalla no admite una fila completa. Para gestionar esta situación el modelo posee la propiedad flex-wrap con la que podemos controlar lo que el navegador debe hacer en tal situación

Por ejemplo

<style>
#contenedor {
display:flex;
flex-wrap:nowrap;
width:260px;
height:150px;
border:1px solid black;
}
#contenedor div{
width:50px;
height: 50px;
border: 1px solid red;
}
</style>

<div id="contenedor">
<div>item A</div>
<div>item B</div>
<div>item C</div>
<div>item D</div>
<div>item E</div>
<div>item F</div>
</div>

Prueba este ejemplo en el sandbox

Como está escrito verás que los hijos se estrechan al máximo para poder mostrar el contenido y caber dentro de su contenedor, y en caso de que no sea suficiente pueden sobresalir del contenedor (este sobrante se puede controlar con la propiedad overflow)

Pero si modificas el valor de flex-wrap y lo pones en wrap verás que la fila se rompe en dos: cuando no haya espacio para un item lo pasa a la segunda linea. Si en lugar de wrap pones wrap-reverse ocurre lo mismo pero empezando por la parte foinal del contenedor (cross-end), es decir, el borde inferior por defecto.

Comprúebalo en este ejemplo

<style>
#contenedor {
display:flex;
flex-wrap: wrap-reverse;
width:260px;
height:150px;
border:1px solid black;
}
#contenedor div{
width:50px;
height: 50px;
border: 1px solid red;
}
</style>

Verás que parte de la fila se coloca en la parte inferior de la caja comenzando con el prmer hijo, llega al borde y pone el siguiente hijo en una fila superior.

Las propiedades flex-wrap y flex-directoin pueden abreviarse en una sola regla flex-flow. Se le asignan los dos valores separados por un espacio o uno solo usandose para el otro el valor por defecto

<style>
.caja{
display:flex;
flex-direction:column;
flex-wrap:wrap;
}
.caja{
display:flex;
flex-flow: column wrap;
}

Ambas declaraciones CSS son equivalentes, y la forma abreviada ahorra espacio y escribir, pero no tiene más ventajas que esas.

En el caso de que el modelo flex presente multiples lineas con los hijos, estas filas pueden también espaciarse o alinearse a lo largo del eje transversal. La propieda que controla esta alineación es align-content. Los valores que puede tomar con

flex-start

alinea la primera linea con cross-start y las restantes quedan pegadas a la fila anterior. Si flex-direction es row las lineas se alinean al borde superior.

flex-end

la última linea se pega al borde  cross-end y las restantes quedan pegadas a la fila anterior. Si flex-direction es row las lineas se alinean al borde inferior.

center

los lineas con los items hijos quedan centradas en el contenedor. Si flexdirection es row, se centran en vertical

space-around

Reparte el espacio sobrante del contendor entre todas las filas y rodea cada un espacio de anchura similar. La distancia entre las filas será doble que la distancia a los límites.

space-between

coloca todo el espacio libre entre las filas, pero mantiene la primera y última pegadas a los bordes paralelos al eje principal.

Stretch

Agranda los bloques hijos para que se ocupe todo el espacio disponible a lo largo del el eje transversal. En este caso se agrandan verticalment.

En estos ejemplos usamos la fila (eje horizontal) como eje principal, or tanto los limites start y end se refieren a bordes superior e inferior. Si se usa wrap-reverse en lugar de wrap se cambia el sentido de los ejes: start sería inferior y end superior.