Ventajas para comenzar a utilizar Flexbox

¿Qué es Flexbox? En pocas palabras, lo que nos permite alinear, llenar o distribuir el espacio entre los elementos dentro de un contenedor, usando anchos y alturas flexibles. Esto, lo convierte en una gran herramienta para usar en sistemas de diseño responsivo. Además, permite olvidar los float o position para cuando se desee centrar y ordenar los elementos de un diseño web.

Una de las grandes ventajas que tiene el Flexbox, es su soporte. Casi todos los navegadores han implementado la mayoría de las funcionalidades de la herramienta. Sin embargo, falta que se integre el 100% de compatibilidad, porque hasta el momento soporta el 97,72%.

De hecho, el 96.92% de los usuarios en todo el mundo usan un navegador que admite Flexbox. El único problema que se presenta es el soporte del navegador Internet Explorer (IE) donde la versión IE10 y IE11 solo ha implementado Flexbox parcialmente.

Recomendaciones para utilizarlo

Antes de comenzar a utilizar Flexbox debes hacerte tres preguntas: ¿qué usuarios te importan?, ¿qué navegadores utilizan? y ¿el público objetivo usará una versión antigua de IE?

Siempre debes investigar primero a tu público objetivo, ya que si tu proyecto tiene mucho tráfico de IE8 e IE9 no será compatible con Flexbox y presentará errores en su visualización.

Para los navegadores que tienen soporte parcial, como es en el caso de IE11, deberás tener muy presente usar los prefijos necesario para evitar errores.

Cuáles son las ventajas que tiene Flexbox

Para comenzar a utilizar Flexbox no es necesario conocer todas su propiedades. Sin embargo, tienes la posibilidad de desarrollar entretenidos diseños con las siguientes declaraciones:

• Display-flex: Establece el contenedor como un contenedor flexible. También, permite un contexto flexible para todos sus hijos directos.
• Justify-content: Controla la alineación horizontal de los elementos dentro del contenedor flexible. (solo si, la dirección flexible de los elementos es el valor por defecto, es decir, row. )
• Align-items: Controla la alineación vertical de los elementos dentro del contenedor flexible. (solo si, la dirección flexible de los elementos es el valor por defecto, es decir, row. )
• Flex-direction: Especifica la dirección de los elementos flexibles.

Centrar elementos verticales y horizontales

Es seguro que más de una vez no lograste centrar elementos verticales u horizontales dentro de un contenedor. Ahora, con Flexbox, es más fácil de realizarlo y sólo necesitarás conocer las siguientes propiedades.

Estas propiedades se aplican al contenedor flexible, actuando directamente a su hijo, para indicar que se alinee al centro de los dos ejes del contenedor.

Flex-direction también es una propiedad que se aplica al contendor y con ella podrás indicar la dirección de los elementos, teniendo dos opciones principales; flex-direction: row (valor por defecto) o flex-direction: column, donde podrás jugar con el eje principal y transversal del contenedor flexible.

Distribuir y alinear elementos nunca fue más fácil. Con justify-content y align-items ahorrarás mucho tiempo, sobretodo cuando te presentes con más de un elemento que necesites alinear de diferentes formas.

Con la propiedad justify-content: space-around, los elementos podrán tener espacio distribuido uniformemente en ambos lados de las cajas. 

Incluso, con justify-content: space-between; podemos tener el espacio distribuido de manera uniforme entre los elementos del medio, sin tratar de solucionar esto con :first-child o :last-child para que la primera y última caja no tengan un espacio no deseado.

Otra ventaja de Flexbox es “order”, ya que nos permite cambiar el orden de los diferentes elementos dentro del contenedor flexible. Además, podrás jugar con los medias querys, modificando el orden de los elementos al momento de pasar a un dispositivo mobile.

Puedes intentar colocando en primera posición las fotos y luego el contenido, no así como está en desktop.

Es hora de practicar con Flexbox

Ya vimos una pincelada de lo que puede hacer Flexbox. Actualmente, existe una cantidad de cursos, tutoriales y ejercicios que te ayudarán a conocerlo mejor. Por eso, te dejamos algunas recomendaciones para que comiences a practicar:

• Zona de juegos Flexbox: se trata de un documento en vivo con el que puedes jugar para probar el efecto de cada par de propiedad-valor.
• Flexbox (CSS Tricks): es una descripción general de todo flexbox.
• Flexbox Froggy: es un juego para aprender CSS flexbox.

Definitivamente, recomendaría usar Flexbox, ya que es una gran herramienta para trabajar y ahorrar lapsos de tiempo. También, nos permite resolver problemas complejos de UI con unas pocas propiedades de CSS3.