Propiedad FLEXBOX

Flexbox es una nueva propiedad que se ha creado específicamente para crear
sitios web. Si recordáis bien los elementos flotantes os dije que se crearon
para poner texto alrededor de una imagen. Pues bien esta nueva propiedad
nos va a permitir crear autenticas páginas profesionales. Al final seremos
capaces de hacer una autentica página web real.

Resumiendo Flexbox es un conjunto de propiedades que nos permiten distribuir nuestros elementos de una forma flexible para crear mejores layouts. Para utilizar flexbox necesitamos un contenedor padre que tenga elementos hijos, estos últimos son los elementos que serán flexibles.

Flexbox se divide en 2 grupos de propiedades:

1. Propiedades para los elementos padre.
2.  Propiedades para los elementos hijo

Propiedades del contenedor padre (El primero es el que viene por defecto):

• display:flex; Nos permite habilitar que los elementos hijos sean flexibles.
• flex-direction:
• row | row-reverse | column | column-reverse
• flex-wrap:
• no-wrap | wrap | wrap-reverse
• flex-flow: <flex-direction> || <flex-wrap>;
• Es un atajo de flex-direction y flex-wrap.
• justify-content:
• flex-start | flex-end | center | space-between | space-around
• align-items:
• flex-start | flex-end | center | stretch | baseline
• align-content: (Importante esta propiedad solo funciona cuando hay más
• de una fila de elementos).
• stretch | flex-start | flex-end | center | space-between | space-around

Vamos a ver ahora un ejemplo de cada propiedad usando un archivo en HTML
y otro en CSS.

FLEXBOX PARA LOS ELEMENTOS HIJOS

Lo primero que vamos a ver que son mucho más importantes las propiedades
de los elementos padre. Las propiedades que podemos tener son las
siguientes:

• order → Con esta propiedad podemos establecer el orden en el que aparecen los elementos de una caja flexible. Por defecto tiene el valor 0 y muestra los valores con el que aparecen en el código HTML.
• flex-grow → Especifica el factor de crecimiento, es decir, cuanto crecerá un elemento en relación a los demás. Por defecto tiene el valor 0.
• flex-shrink → Determina el factor de reducción y por defecto tiene el valor de 1. Para que funcione el contenedor padre ha de tener la propiedad nowrap.
• flex-basis: El tamaño inicial que tiene un elemento, podría sustituir al valor width, por defecto tiene el valor auto.
• La propiedad resumida: flex: <flex-grow> || <flex-shrink> || flex-basis. El valor que usaremos normalmente sera: flex: auto;
• align-self: Nos permite posicionar un elemento de forma diferente a los restantes.
• flex-start | flex-end | center | stretch | baseline