¿Qué aporta Flexbox a CSS3?

Flexbox (o Flexible Box) es un potente mecanismo de CSS3 que nació de la urgencia de cubrir unas necesidades específicas de maquetación de contenidos que CSS no era capaz de conseguir fácilmente, como las alineaciones verticales.  De este modo, Flexbox perfecciona las posibilidades de diseño de CSS3 y permite componer una página web de manera muy sencilla y versátil, como explicamos a continuación.

Al tratarse de un estándar de la web, no es necesario instalar ningún elemento para que los navegadores modernos entiendan Flexbox, ya que no sustituye al resto de características disponibles para CSS, sino que las complementa y mejora.

Definición de Flexbox

Podríamos considerar Flexbox como un modelo de creación de layouts en CSS3, capaz de definir la manera de mostrar los elementos y su interacción con los demás. Este módulo incluye mejoras respecto a sus predecesores, solventando sus limitaciones y problemas técnicos y que nos brinda la posibilidad de crear diseño muy avanzados, que cubren las necesidades actuales, tanto de estética como de adaptabilidad a los diferentes formatos de pantallas, sin necesidad de recurrir a otros programas o a los denominados hack CSS que trampean las funcionalidades de CSS a nuestro antojo (y necesidad).

Flexbox simplifica mucho la tarea de implementar reglas y estilos CSS, cálculos y otra serie de elementos, por lo que reduce en muchas ocasiones el número de tareas a una única.

Si nos enfocamos en la parte práctica, con Flexbox se consigue agregar un nuevo y completo tipo de display CSS, con muchísimas aplicaciones para este tipo de display. A modo de comparación, si en CSS existen los display block, inline o inline-block, con Flexbox tendremos los display flex o inline-flex.

Partes de Flexbox

Flexbox se compone básicamente de dos elementos diferenciados, que son la caja contenedora y el propio contenido. Cuando aplicamos un display flex o inline-flex conseguimos que la caja se comporte conforme a este estándar, distribuyendo sus elementos interiores con las propiedades de este estándar de maquetación.

Gracias a Flexbox la distribución de los elementos contenidos es mucho más sencilla, ya que podemos modificar sus dimensiones, su disposición, el espacio que ocupan, etc.

¿Para qué sirve Flexbox?

Además de agilizar las tareas, Flexbox nos brinda la posibilidad de distribuir y posicionar los elementos dentro del espacio de trabajo, admitiendo muchos comportamientos diferentes, inaccesibles anteriormente con los otros CSS. Entre las novedades más importantes destacan:

  • Alineación vertical. La ardua tarea de lograr que los elementos se alineen verticalmente se simplifica muchísimo con Flexbox.
  • Conseguir que todos los ítems de un listado tengan la misma altura. Esto era algo complicado de lograr con CSS anterior, pero con Flexbox es pan comido, con independencia de su contenido, aun en los casos en que es contenido impredecible y variable. También destaca la facilidad de controlar la anchura de los elementos.
  • Cambiar el orden de los elementos. Gracias a Flexbox, podemos ordenarlos de formas diferentes al visualizarse en la página, sin necesidad de cambiarlos en el HTML. De este modo, los desarrolladores y diseñadores frontend adquieren un mejor control sobre los elementos de la página, pudiendo especificar su ubicación y apariencia simplemente modificando los atributos CSS.

Compatibilidad con los navegadores

En la actualidad, casi todos los navegadores modernos soportan e interpretan de manera correcta Flexbox. Sin embargo, algunas versiones obsoletas de Internet Explorer, como la 8 o la 9 no soportan Flexbox. Llegados a este punto, conviene plantearse si queremos una web actual y adaptada a las últimas novedades o si queremos que se vea en cualquier explorador, por muy antiguo que sea. Aun así, para quienes esto suponga un problema, deberán buscar técnicas alternativas o fallbacks para que permitan que su web se vea en todos los navegadores, como es el caso de las técnicas de Responsive Web Design.

Aunque el número de usuarios de IE8 e IE9 es reducido, sí es muy importante que las web se vean correctamente en las versiones antiguas de móviles, cuyos vetustos navegadores dan soporte parcial a Flexbox, obligando al programador a emplear preprocesadores tipo autoprefixer o postCSS.

Como opción alternativa para obtener un soporte parcial a Flexbox en estos navegadores antiguos, está el uso de fallbacks o polyfills (como Flexibility), que instalan librerías Javascripts adicionales. Si bien es cierto que logran su objetivo, pueden afectar al rendimiento de la web, desencadenando en que no se vean los contenidos igual que en el navegador con soporte nativo.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *