Este es un artículo que nos sirve de introducción a Flexbox. Nos vamos a quedar en un conocimiento un tanto teórico, pero al final de este texto encontrarás un vídeo con poco más de dos horas, donde también lo conocerás por la práctica.

Antes de comenzar con Flexbox queremos que nos respondas una pregunta ¿Cuántas veces has sentido que CSS no era suficiente para resolver las necesidades de un proyecto? o quizás, ¿Cuántas veces has tenido que modificar el HTML para hacer posible la maquetación de unos elementos de una manera determinada? O peor, recurrir a Javascript para conseguir que se coloquen como deseas.

Si llevas un tiempo en el mundo del desarrollo para la web habrás observado que, a pesar que CSS ofrece muchas características para maquetación de contenidos y creación de "layouts", determinados comportamientos eran difíciles de producir y te obligaban a ingeniártelas de diversos modos para conseguir tus objetivos.

En resumen, si lo que necesitas es "clavar un diseño", para que se vea muy bien, tenías que sufrir con las herramientas disponibles hasta ahora. Esas y otras cuestiones se pretenden solucionar con Flexbox.

Qué es Flexbox

Flexbox es un módulo completo de layout disponible en la especificación de CSS3. Define cómo se muestran los elementos y cómo se relacionan con el resto. Como concepto, puedes entender Flexbox como un modelo para la creación de layouts, que pretende mejorar los anteriores, aunque sin ser excluyente. Todas las técnicas disponibles antes de Flexbox tenían diversos problemas y limitaciones que se pretenden solucionar con esta especificación de CSS3. Flexbox es una herramienta muy avanzada para poder crear layouts de características avanzadas y necesarias en el día de hoy, donde es tan importante una estética cuidada y una gran adaptabilidad a distintos formatos de pantalla.

En la práctica, Flexbox agrega un nuevo tipo de "display CSS", con una completa gama de nuevas propiedades aplicables a ese tipo de display, a partir de los que puedes conseguir cosas extraordinarias. Por aclararnos, igual que tienes en CSS el display "block", "inline", "inline-block", etc. y sabías todos las propiedades que te acepta ese tipo de elementos, ahora dispones de "flex" e "inline-flex", siendo que los elementos que tienen ese nuevo display aceptan una cantidad enorme de nuevas propiedades de gran utilidad.

En resumen, lo que antes tenías que conseguir con una docena de reglas y estilos CSS, cálculos, etc. ahora lo vas a poder implementar mucho más fácilmente, a veces incluso con una única propiedad.

En Flexbox diferenciamos dos elementos principales: la caja contenedora y los elementos que situamos dentro. Al aplicar un display flex o display inline-flex hacemos que una caja se comporte mediante este nuevo estándar y eso produce que los elementos que tiene como contenido se puedan distribuir con las propiedades de este estándar de maquetación.

El contenedor va a poder modificar las dimensiones y el orden de los items, para acomodarlos de distintas maneras controladas por el desarrollador. Podremos repartir el espacio entre ellos de diversas formas, para distribuirlo a nuestro antojo, permitir que los items se estiren para ocupar todo el contenedor, o se encojan para que quepan en él sin desbordar, de colocarse distribuidos en filas o en columnas, etc.

Qué soluciona Flexbox

Flexbox permite que se puedan posicionar elementos de una manera más concisa y distribuir los espacios entre ellos de forma más flexible. Permite gran cantidad de comportamientos, pero este sería un rápido resumen, si nos ceñimos a las cosas que antes eran muy difíciles de hacer mediante CSS anterior:

Alineación vertical:

Seguro que has sudado para conseguir alinear elementos en la vertical. A veces dado por imposible, hoy es algo que es muy sencillo con Flexbox.

Columnas de igual altura:

Conseguir que todos los items de un listado tengan la misma altura, independientemente de su contenido. También difícil de conseguir con CSS anterior, sobre todo cuando el contenido era variable e impredecible. Por supuesto, Flexbox también nos permite elementos con igual anchura, y aunque esto es algo que ya teníamos antes fácilmente, ahora resulta mucho más sencillo.

Cambiar el orden de los elementos:

Sin tener que cambiar el orden de los elementos en el HTML, con Flexbox conseguimos que se ordenen de maneras distintas al visualizarse en la página.

Con esto se consigue que los diseñadores, maquetadores y desarrolladores frontend en general tengan mucho mayor control sobre los elementos en la página y puedan, de una manera más detallada, especificar su apariencia y colocación, limitándose solamente a modificar los atributos CSS.

Flexbox y compatibilidad con navegadores

Flexbox hoy ya es una realidad, puesto que los navegadores modernos lo soportan y lo interpretan correctamente. Por tanto, está listo para usar en cualquier tipo de proyecto.

El único navegador que no lo soporta es Internet Explorer en versiones antiguas, como IE8 o IE9 (Navegadores que a día de hoy no están soportados ni por el propio fabricante). Si es requisito indispensable que tu web se vea igual en estos navegadores, tendrás que usar las técnicas de toda la vida, o fallbacks que enseguida comentamos. Pero antes de ello conviene ver en la siguiente tabla de compatibilidad, extraida de Caniuse:

Realmente IE8 o IE9 no son tan importantes en la actualidad, pues un pequeño porcentaje de usuarios (menor del 1% cada) lo usa. Lo que sí es más importante son las versiones antiguas de móviles, con Android 4.3 o anteriores. Esas versiones tienen navegadores antiguos que daban un soporte parcial a Flexbox, donde estamos obligados a usar los prefijos de las propiedades CSS ("vendor prefixes"). Por eso te vendría bien contar con algún tipo de preprocesador, postCSS y autoprefixer.

Aunque no suele ser la mejor solución, existen fallbacks o polyfills que aportan un soporte parcial a Flexbox, instalando una librería Javascript adicional. Son una opción cuando necesitamos soportar Flexbox en algunos navegadores antiguos, aunque también hay que advertir que tendrá un coste en términos de rendimiento / peso, y quizás no todo se vea exactamente igual que en navegadores con soporte nativo. Un ejemplo de polyfill lo encuentras en Flexibility.

Conoce Flexbox en la primera clase del Taller Profesional de Flexbox

Si quieres aprender más y además ver cómo se comportan las propiedades principales de Flexbox en una serie de ejemplos prácticos, te recomendamos continuar viendo el siguiente vídeo.

Es una clase impartida en octubre de 2016, la primera del Taller de Flexbox de EscuelaIT. Es un taller en el que se va abordar el desarrollo con Flexbox por la práctica y con ejemplos reales.