Qué es FlexBox: Conceptos básicos

Qué es Flex

Flex es uno de los nuevos valores HTML5 para propiedad CSS display, que nos permite maquetar nuestras páginas web de una manera mucho más fácil de lo que se hacía con la forma tradicional, en la que utilizábamos propiedades como float o position, entre otras.

Por qué Flex

Se llama Flex porque tenemos un contenedor, llamado contenedor Flex, que es el elemento que contiene la propiedad display:flex.

Desde ese contenedor vamos a poder especificar la alineación de los elementos que hay dentro, el tamaño de los elementos que contienen y distribuir el espacio restante que hay entre los elementos del contenedor Flex, y todo esto en una sola dirección, ya sea una horizontal o vertical. Es decir, podemos distribuir los elementos que contiene la etiqueta sin poner nada dentro de esos elementos.

Flex a nivel visual

Vamos a ver dos ejemplos para ver cómo funciona de verdad:

Ambos son contenedores Flex, el primero es un contenedor Flex a nivel horizontal que contiene tres elementos flexibles, el segundo es un contenedor Flex a nivel vertical que contiene tres elementos flexibles.

Únicamente dando propiedades al contenedor Flex podemos alinear todos los elementos que están dentro del mismo.

Aspectos a tener en cuenta

Hay ciertas cosas con las que tener cuidado, como por ejemplo que a día de hoy no todos los navegadores soportan contenedores Flex. Aunque es cierto que la gran mayoría de los navegadores que usamos diariamente ya lo soportan, no obstante hay que tener cuidado porque no todos los navegadores de los móviles lo soportan.

Incluso Twitter y su librería Bootstrap ya empieza a utilizar Flex, lo cual nos indica que ya es algo totalmente aceptado como estándar y que podemos utilizar está técnica con total tranquilidad para llegar a más del 90% de todos los dispositivos.