El día que cambió la vida del desarrollador Front End: FlexBox (Parte I)

1. Un problema sencillo

Imaginemos que queremos hacer algo tan sencillo, a priori, como centrar vertical y horizontalmente un elemento HTML dentro de otro elemento HTML.

Vamos a partir de la base de maquetar dos cajas, una dentro de otra.

A la antigua usanza, tendríamos que utilizar algunos trucos basados en tablas, como display: table; y display: table-cell;. Al final, lo que hacemos es indicarle a los elementos que se comporten como una tabla y acabamos haciendo algún truco con border-spacing para que el resultado sea el deseado. Esto causa que tengamos que escribir código innecesario y que utilicemos reglas que no están realmente pensadas para conseguir ese efecto.

Ahora vamos a intentar hacer lo mismo, pero utilizando FlexBox. Esta característica de CSS nos permite colocar elementos en una dimensión (horizontal o verticalmente) de manera sencilla. Además, nos permite controlar perfectamente el tamaño que queremos que tenga cada elemento, como queremos que los elementos se alineen tanto vertical como horizontalmente, si queremos que los elementos se coloquen en una sola línea o salten a la línea siguiente si no entran, etc.

Volvamos al ejemplo, esta vez utilizando FlexBox.

Como vemos, el código a utilizar es mucho menor y no tenemos que utilizar ningún truco para conseguir que los elementos tengan el tamaño que queremos.

Estamos hablando de un ejemplo muy sencillo y que, aún así, no tenía una solución trivial con la tecnología que teníamos disponible hasta hace poco tiempo. Ahora vamos a complicarlo un poco más utilizando varios elementos y pensando también en la versión responsive (adaptable a distintos tamaños de dispositivo) de nuestra web.

2. Varios elementos y versión responsive

Hasta ahora, es posible que aún no estemos convencidos sobre el uso de FlexBox ya que el ejemplo que hemos visto es sencillo y no aporta una mejora espectacular con respecto a otro tipo de soluciones. Por eso, vamos a complicar el ejemplo, pensando ahora en dar estilo a una sección de nuestra web en la que tenemos un mosaico de cuatro noticias.

Nuestra intención es que las cuatro noticias se vean en un mosaico alineadas, partiendo de la base de que todas las imágenes tendrán el mismo alto, los títulos de las noticias pueden variar de tamaño y queremos que estén centrados verticalmente entre sí. En versión para tablet, queremos que las noticias se muestren de dos en dos y en versión para móviles queremos que se muestren de una en una.

Abre los ejemplos en CodePen y cambia el tamaño de la pantalla de tu navegador para ver cómo cambia el comportamiento de los elementos.

Si utilizamos la manera tradicional utilizando table y table-cell nos encontramos con varios problemas.

• Para centrar los títulos verticalmente, tenemos que añadir nuevos elementos y utilizar el truco de los table y table-cell añadiendo un alto fijo a los títulos. Esto puede causar problemas en el futuro cuando tengamos títulos más largos y no nos entren en el alto que hemos especificado.
• Cuando pasamos a la versión para tablet, tenemos que utilizar float en los elementos para que se vean de dos en dos, lo que causa que tengamos que añadir un elemento al final de los mismos con una regla clear: both; para que el elemento padre ocupe el tamaño que ocupan sus hijos. Si no hacemos esto no podríamos ponerle un color de fondo al bloque que engloba todas las noticias, por ejemplo.
• Cuando pasamos a la versión para tablet, tendremos que ajustar el alto que ocupan los títulos ya que el cambio de tamaño puede causar que los títulos no entren en el espacio disponible.

A priori, no parecen problemas demasiado complicados de resolver pero, cuando llevas varios proyectos reales a tus espaldas estos “trucos” pueden llegar a causar problemas mayores.

Vamos a utilizar FlexBox para desarrollar el mismo layout. Como podemos ver, nos proporciona bastantes ventajas.

• No necesitamos introducir elementos de HTML para conseguir visualizar el layout correctamente. Eliminamos el div con clear: both; y el span dentro del título de las noticias, que no nos aportan nada semánticamente.
• Los elementos ocupan el tamaño que deben ocupar. No necesitamos introducir un elemento con clear: both; para que se vea el color de fondo de las noticias ni necesitamos añadirle un alto a los títulos de las noticias para que se vean centrados verticalmente.
• En versión responsive los elementos no cambian sus reglas drásticamente. Da igual la versión en la que nos encontremos, los elementos siempre se colocan utilizando FlexBox. En el primer ejemplo al principio se colocaban utilizando tablas, después floats y posteriormente bloques normales.

3. El día en que me cambió la vida

Como desarrollador Front End, la inclusión de FlexBox como estándar en casi todos los navegadores ha significado un cambio en la manera que tenemos de trabajar desarrollando webs. FlexBox nos permite ahorrar una grandísima cantidad de código en el día a día, a la vez que su utilización nos permite no tener que realizar trucos y “hacks” según el navegador en el que nos encontremos. Esta tecnología ha cambiado la manera que tenemos los desarrolladores de realizar layouts de una dimensión que, sorprendentemente, era un verdadero quebradero de cabeza hasta hace relativamente poco.

Además, con el auge de los dispositivos móviles, nos permite desarrollar las versiones del layout para los diferentes tamaños sin necesidad de mucho esfuerzo y utilizando código mínimo para la mayoría de las cosas cuando, hace pocos años, teníamos que realizar verdaderas virguerías para conseguir que todo se coloque correctamente.

En otro artículo posterior, hablaremos de otro estándar recién salido del horno, llamado Grid Layout, y que añade mucha más potencia al desarrollo Front End, permitiéndonos realizar layouts de dos dimensiones de manera muy sencilla.

Referencias

A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/

CSS Flexible Box: https://www.w3schools.com/css/css3_flexbox.asp