Display: flex; (para declarar al contenedor de tipo flex)

1- Direccion Flex

Flex-direction: row; (su dirección será en fila).

Flex-direction: column; (su dirección será en columna).
Flex-direction: row-reverse; (su dirección será en fila pero los elementos tendrán el
orden alreves.
Flex-direction: column-reverse; (su dirección será en columna pero los elementos
tendrán el orden alreves).

2- Flex Wrap

Flex-wrap: wrap; (para que los elementos se apilen cuando no tengan espacios).
Flex-wrap: nowrap; (para que los elementos no se apilen cuando no tengan espacios).
Flex-wrap: wrap-reverse; (para que los elementos se apilen cuando no tengan
espacios pero de forma alreves).

Sintaxis abreviada

Flex-flow: row wrap; (primero se especifica la dirección de flex y luego el atributo de

wrap deseado).

3- Alineacion en el eje principal

El eje principal corre en dirección al flex. Ejemplo: Si la dirección del flex es en columna
correrá de arriba hacia abajo y si es en fila correrá de izquierda a derecha.

Justify-content: flex-start; (los elementos se alinearan al principio del contenedor)

Justify-content: flex-end; (los elementos se alinearán al final del contenedor)
Justify-content: center; (los elementos se alinearan en el centro del contenedor)
Justify-content: space-between; (Añadera un espacio en cada uno de los elementos
en el contenedor (recomendado para menú.))
Justify-content: space-around; (Igual que space-between pero el espacio se distribuye
igual en cada elemento)
4- Alineacion en el eje transversal

El eje transversal corre en dirección al flex. Ejemplo: Si la dirección del flex es en

columna correrá de izquierda a derecha y si es en fila correrá de arriba hacia abajo

Align-items: flex-start; (los elementos se alinearan al principio del contenedor)

Align-items: flex-end; (los elementos se alinearan al final del contenedor)
Align-items: flex-center; (los elementos se alinearan al centro del contenedor)

5- Alineacion de las filas en el eje transversal

Align-content: flex-start; (los elementos se alinearan al principio del contenedor)

Align-content: flex-end; (los elementos se alinearan al final del contenedor)
Align-content: flex-center; (los elementos se alinearan al centro del contenedor)