Wrap: Flexbox multilinea
El modelo flexbox distribuye sus items o bloques hijo a lo largo de un eje: o en horizontal (row) o en vertical (columns). Es una layout unidireccional, no obstante puede que el ancho de la pantalla no admita 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
<head>
<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>
</head>
<body>
<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>
</body>
Prueba este ejemplo en el sandbox y cambia la propiedad flex-wrap de nowrap a wrap para comprobar su funcionamiento
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 final del contenedor (cross-end), es decir, el borde inferior por defecto.
Comprúebalo en el ejemplo.
<head>
<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>
</head>
<body>
<div class="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>
</body>
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
.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.
Alineación multilinea
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, por lo 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.