Flexbox es un módulo de diseño de CSS que permite alterar ancho, alto y posicionamiento de elementos usando menos código haciendo mucho mas sencillo el diseño responsive. La forma de activarlo es mediante la propiedad display

div{
	display:flex;
}

A partir de ahora, el div será flexible y podremos utilizar todas las herramientas que flexbox nos brinda. Vemos algunas de ellas

Flex-direction

Los elementos flex tienen dos ejes: principal y secundario, que pueden ser los ejes x (horizontal, en forma de fila) u eje y (en forma de fila). La propiedad flex-direction es la que nos define cual será el eje principal. Posee 4 valores posibles

• Row: Define que los elementos se posicionaran sobre el eje principal. Los elementos se agrupan en forma de fila. Este es el comportamiento por defecto.
• Row-reverse: Define que los elementos se posicionaran sobre el eje principal, los elementos se agrupan en forma de fila PERO se invierte el orden de los elementos
• Column: Define que los elementos se posicionaran sobre el eje secundario, los elementos se agrupan en forma de columna
• Column-reverse: Define que los elementos se posicionaran sobre el eje secundario, los elementos se agrupan en forma de fila PERO se invierte el orden de los elementos.

Acá está un ejemplo gráfico de como funciona esto

Flex-wrap

Muchas veces los elementos exceden el tamaño del contenedor. Esto hace que por defecto el contenedor no pueda abarcarlos y estos salgan para afuera. La propiedad flex-wrap viene a regular ese comportamiento. Esta propiedad acepta tres valores:

• nowrap: Si los elementos no entran estos podrán salir de su contenedor.
• wrap: Si los elementos no entran deben adaptarse al contenedor posicionandose en otra linea.
• wrap-reverse: Si los elementos no entran deben adaptarse al contenedor posicionandose en otra linea PERO al posicionarse de esa forma se invertirá el orden

Este es un ejemplo gráfico de esta propiedad

Justify-content

Esta propiedad nos permite definir como se alinearán los elementos dentro del eje principal del contenedor flex. Permite esta gama de valores.