11

3

Introducción a Flexbox o bloques flexibles

Normalmente en la actualizad para crear la estructura de una web con distintos bloques paralelos usamos la propiedad float o antiguamente se usaban tablas (y no tan antiguamente).
Pero CSS3 incorporó Flexbox, una forma totalmente personalizable de ordenar y estructurar elementos en una web que se adapta de la forma que prefieras, lo que la hace perfecta para los Responsive Designs.

Este es el uso más básico, ya que podemos personalizar cualquier cosa, en este caso los bloques están en horizontal y justificados.
Pero podemos alinearlos a un lado u otro o hacer que aprovechen todo el alto (en caso de estar dispuestos en horizontal, uno al lado del otro) o todo el ancho (si están en vertical) y muchas cosas más, que iremos viendo poco a poco.
Nota: pondremos en práctica la actualización de flexbox, que además debemos de usar con los prefijos de los navegadores.

Usar Flexbox

Para usar flexbox tenemos dos elementos o grupos que tenemos que "configurar", el primero es el contenedor, el que usa la propiedad "display: flex" y además se le añade el tipo de disposición de sus elementos.
Y el otro grupo de elementos son los que están dentro de la caja flexible (flexbox) y en ellos establecemos el ancho en proporción que tendrá y otra cosa muy importante, que es el orden, ya que podemos ordenar a nuestro gusto estos elementos (simplemente numeramos su orden).

1. /* Forma "estándar" */
2. display: flex;
4. /* Según navegadores */
5. display: -webkit-flex;
6. display: -moz-flex;

Ahora mismo tomaría los parámetros por defecto y se mostrarían los elementos del interior de flexbox en línea (ocuparían según su tamaño, no tienen porque cubrir el ancho) y el alto le ocuparían entero.

Eje de la disposición

Con flexbox podemos establecer la disposición de los elementos, atendiendo a sus ejes (es decir, en vertical u horizontal), que es establecido con flex-direction y admite varias formas que podemos resumir para empezar en "row" (horizontal) y "column" (vertical).
Esta propiedad además de poder tener una disposición vertical u horizontal tiene las mismas pero del reves, es decir, invertirá el orden de los elementos los atributos anteriores (row y column) pero con el sufijo "reverse" que quedaría de la siguiente forma: row-reverse y column-reverse. Esta propiedad la tenemos que añadir al elemento con el flexbox y también necesita los prefijos de los navegadores.

1. /* Forma "estándar" */
2. flex-direction: [row|column|row-reverse|column-reverse];
4. /* Según navegadores */
5. -webkit-flex-direction: [row|column|row-reverse|column-reverse];
6. -moz-flex-direction: [row|column|row-reverse|column-reverse];

Ya hemos visto antes como la disposición en horizontal (uno al lado del otro, como en el ejemplo anterior) y ahora usaremos la disposición en vertical.
Para comprobar la facilidad de cambiar la disposición al pasar por encima del bloque se cambiará de vertical a horizontal.

Y tras ver como cambiar de horizontal a vertical (simplemente cambiando la dirección de column a row) veremos cómo revertir la dirección de los elementos (al pasar por encima del siguiente bloque se visualiza).

Resumen

Hasta aquí llega la introducción de flexbox, que es una propiedad muy extensa y algo complicada, ya que tiene muchas propiedades distintas que debemos de usar en distintos elementos.
En el próximo artículo veremos cómo controlar el desbordamiento de los elementos dentro de un flexbox y las alineaciones de los elementos en eje principal (que es el que hemos cambiado en este parte que corresponde a la disposición vertical u horizontal) y el secundario (que es el contrario), pero lo veremos más a fondo.