CSS3 Flexbox

  • Por
  • y  
Qué es Flexbox y por qué tienes que comenzar a usar este potente mecanismo de CSS3 para componer layouts de una manera rápida, sencilla y poderosa.

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.

Nota: hasta la fecha hemos maquetado con técnicas como float o display table, pero estos mecanismos no fueron pensados para utilizarse como los utilizamos. Los diseñadores los usaban y conseguían sus objetivos, muchas veces usando lo que se concen como "hacks css". Flexbox sí es un estándar pensado para hacer layouts y por tanto soluciona la mayoría de las necesidades de los desarrolladores sin tener que emplear técnicas rebuscadas.

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.

Nota: para aclarar posibles dudas tenemos que advertir que Flexbox es una especificación de CSS3. No se trata de una librería de estilos como podría ser Bootstrap, sino de un estándar de la web. No necesitas instalar nada para que lo entiendan los navegadores, igual como tampoco necesitas instalar nada para para trabajar con cualquier característica actual de CSS. Usar Flexbox no es excluyente de usar cualquier cosa que ya estás usando de CSS. Es decir, si decides usar Flexbox en un momento dado, nada te impide seguir utilizando comportamientos anteriores como podría ser float o display table. Simplemente con Flexbox podrás hacer las cosas más rápidamente y llegar donde antes no era sencillo con otros atributos de CSS.

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:

Nota: ¿Por qué no debes preocuparte por IE8 o IE9? porque tienes cosas más importantes en las que pensar y decidir soportarlos producirá que tu web no pueda usar las herramientas más nuevas disponibles para hacer tu trabajo. La web probablemente acabe siendo peor en calidad y menos adaptada a los tiempos que corren y a ti te lleva mucho más tiempo el desarrollarla. Generalmente a los clientes hay que convencerles que no necesitan dar la mejor imagen para navegadores anticuados y uno de los mejores argumentos es cobrar más por hacer el trabajo. De todos modos, usar Flexbox no significa que el contenido no va a estar ahí. Simplemente que no va a lucir de la mejor manera. Hay técnicas, englobadas en el conocimiento de Resposive Web Design, que nos ofrecen la vía para que una web se vea correctamente en todos los navegadores y, a medida que el navegador es más avanzado, luzca mejor porque se usen nuevas y más potentes características. Si quieres profundizar lee el artículo Sobre Progressive Enhancement Vs Graceful Degradation.

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.

Autor

Diana Aceves

Licenciada en química, Diana comenzó con la programación con Java y finalmente su vocación la llevó a convertirse en desarrolladora front-end

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

midesweb

14/10/2016
Aprendí bastante
Ya conocía Flexbox y lo había usado en algún diseño, pero desconocía varias de las cosas que Diana nos comentó en la clase. Según acabé de verla pude resolver algunos problemas en un diseño y conseguir que se adaptasen mis cajas perfectamente en su altura.
Gracias Diana!