18

3

Alinea elementos a tu gusto con Flexbox

Flexbox ya sabemos que es el futuro para la maquetación web y que nos permite personalizar la disposición de una web de la forma que queramos.
Y ahora toca saber como podemos alinear los bloques de flexbox y se puede hacer de varias formas, la primera es alinearlo como si fuese texto (los bloques) y la otra es alinear o disponer de una forma u otra las columnas o filas de bloques flexibles.

Los dos bloques que contienen los elementos de colores tienen el atributo flexbox que vimos como se usaba en el artículo anterior de la serie y los dos bloques (que son los contenedores con flex) les establecemos el tipo de alineación de los items (align-items), usando los atributos de el ejemplo. Empezaremos viendo justo este tipo de alineación, el de los elementos, de forma colectiva e individual y posteriormente la alineación del contenido, una auténtica locura si no lo vemos con ejemplos.

Alineación de elementos (align-items)

Esta propiedad nos permite establecer la alineación del bloque respecto al espacio que tiene disponible, ya que pueden adaptarse en filas si no cogen en el contendor y así lo establecemos.
La propiedad align-items se usa de la siguiente forma y tiene los siguientes atributos: flex-start, flex-end, center, baseline y stretch,.

1. /* Forma "estándar" */
2. align-items: [flex-start|flex-end|center|baseline|stretch];
4. /* Según navegadores */
5. -webkit-align-items: [flex-start|flex-end|center|baseline|stretch];
6. -moz-align-items: [flex-start|flex-end|center|baseline|stretch];

Es importante usar los prefijos de los navegadores para mantener la compatibilidad.
En los siguientes ejemplos comparamos el comportamiento de los distintos align-items.

Los tres primeros ejemplos no necesitan explicación, simplemente se alinea hacia donde queramos (según el eje principal, que establecemos con flex-direction como ya vimos), en la alineación stretch se adapta al alto total y por último con baseline se adapta a la posición del texto, para que aparezca totalmente en lína del anterior.

Evitar el desbordamiento

Al igual que pasa con el texto con word-wrap estos bloques si no entran en el contendor sobresaldrán (desbordarán el contenedor), pero podemos evitar este efecto flex-wrap, que nos permite hacer que en caso de no entrar los bloques se desplacen hacia la línea inferior.
Es necesario que veamos esto, ya que con la siguiente forma de alinear el contenido lo que hace es alinear todas esas filas a nuestro gusto.

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

La diferencia entre wrap y wrap-reverse simplemente es que el primero añade las líneas debajo, lo que sería lo normal, y con el segundo método se estructura de abajo a arriba.
Por defecto está el atributo nowrap, que simplemente provoca el desbordamiento de los elementos.

Alinear el contenido (align-content)

Este parámetro sirve para ajustar a nuestro antojo varias líneas de bloques dentro de un flexbox, nos permite alinearlo de las formas anteriores (alineado arriba, abajo, al centro y ajustándose) y además nos permite hacer que tengan un espacio entre ellos (se reparte automáticamente), diferenciando dos tipos: space-between (espacio entre) y space-around (espacio rodeando), este último añade un margen alrededor del cada fila y el primero solo entre las filas.

1. /* Forma "estándar" */
2. align-content: [flex-start|flex-end|center|space-between|space-around|stretch];
4. /* Según navegadores */
5. -webkit-align-content: [flex-start|flex-end|center|space-between|space-around|stretch];
6. -moz-align-content: [flex-start|flex-end|center|space-between|space-around|stretch];

Esta propiedad es independiente de la alineación de los items, por lo que podemos tener una alineación específica de las propias filas y alinear de una forma distinta el contenido.

Resumen

Si con la primera parte de la serie sobre flexbox, con una introducción al tema creías que esta propiedad era muy buena, con este conjunto de propiedades nuevas aún se muestra más el potencial de flexbox.