2. Flujo de Flexbox

Ejemplo 1

El modo de funcionar del flujo de flexbox es si los items tienen espacio para comprimirse, se comprimen. En el ejemplo siguiente los items tienen un padding, por lo que que sobrepasan al padre y crea un scroll en pantalla debido a que por defecto el flex-wrap está en nowrap (siempre que los items no tengan un tamaño definido).

1
2
3
4
5
6
7
8
9

Ejemplo 2

Si el flex-wrap está en nowrap (valor por defecto), esto causa que si un elemento tiene una anchura determinada, esta puede no respetarse y se comprimirán para adaptarse al padre. En este ejemplo cada caja tiene 200px de ancho por 200 de alto, pero como se puede observar esa anchura no se cumple ya que los items se adaptan al tamaño del padre.

1
2
3
4
5
6
7
8
9

Ejemplo 3

Siguiendo el ejemplo anterior, los items tienen 200x200, pero si añadimos la opción flex-wrap:wrap al contenedor padre, entonces cuando el contenido no tiene espacio salta de linea y no comprime las cajas.

1
2
3
4
5
6
7
8
9

Ejemplo 4

Lo que estamos modificando con el parámetro wrap es el eje secundario ( Y ). Esto se ve mas fácilmente cuando aplicamos un flex-wrap: wrap-reverse ya que lo que hace es cambiar el direccionamiento del eje Y. Las columnas siguen en su sitio, pero cambia la posición de inicio del eje Y de abajo a arriba.

1
2
3
4
5
6
7
8
9

Ejemplo 5

Por lo tanto con flex-wrap modificamos el eje secundario (Y) y con flex-direction el eje principal (X). De este modo si el ejemplo anterior quisiéramos cambiar totalmente los dos ejes habría que poner flex-direction: row-reverse;flex-wrap: wrap-reverse; o bien usar el shorthand flex-flow: row-reverse wrap-reverse

1
2
3
4
5
6
7
8
9