flexbox

La propiedad Flex de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos.

Cuando se diseña una web y queremos hacerlo un sitio responsive que se visualice correctamente en todos los dispositivos sea cual sea su tamaño de pantalla, debemos usar una caja flexible como contenedor principal.

Un contenedor flexible se declara mediante el establecimiento de la propiedad display:flex o inline-flex y todos los hijos de ese contenedor flexible serán flexibles también

La importancia de tener una caja flexible como contenedor principal es que la disposición de los hijos siempre tendrá una correcta visualización, y los podremos distribuir proporcionalmente de una manera automática, sin importar el tamaño de la pantalla

El mismo resultado podríamos obtenerlo con la propiedad float y la propiedad clear, pero no es la idea, porque estas propiedades se crearon para las imágenes no para todos los elementos.

Existen Propiedades flex para el contenedor padre:

Display Flex

Esta propiedad nos permite establecer cual será el contenedor de los elementos a los que queremos dar un acomodo y/o distribución.

Flex Direction

Nos permite establecer la dirección en la que se acomodaran nuestros elementos.

Flex Wrap

Podemos indicar si todos los elementos estarán en linea con su máximo ancho posible o establecido o si queremos que respete el ancho y los elementos se posicionen en varias lineas de elementos.

Flex Flow

Es un atajo entre flex-direction y flex-wrap.

Justify Content

Nos permite decidir la posición de nuestros elementos y la distribución que tendran.

Align Items

Nos permite posicionar / distribuir elementos verticalmente. (solo para una linea de elementos)

Align Content

Nos permite posicionar / distribuir elementos verticalmente, igual que align-items, solo que align-content solo funciona para lineas de elementos, por ejemplo cuando tenemos establecido un flex-wrap:wrap; y los elementos se posicionan en varias lineas.

Existen Propiedades flex para los elementos hijos:

Flex Basis

Establecemos el tamaño que tendrá un elemento.

Flex Grow

Establecemos la proporción de crecimiento que tendrá un elemento a comparacion con los demás.

Flex Shrink

Establecemos la proporción de encogimiento que tendrá un elemento a comparacion con los demás.

Flex
La propiedad CSS flex es una propiedad resumida que especifica la capacidad de un elemento flexible para alterar sus dimensiones para llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.

Order

Establecemos el orden que tendrá un elemento a comparación con otros elementos.

Align Self

 Nos permite alinear un elemento independientemente de los demás