Flexible Box en CSS

Investigando sobre posibilidades que se agregaron en años recientes dentro de la disposición o layouts dentro de un sitio web, me encuentro con que desde el 2011 la W3C se encuentra trabajando en un estandar denominado de Caja Flexible o FlexBox.

En el 2011 el documento de la recomendación se encontraba como Candidate Recommendation (http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/), sin embargo en marzo de este año se le había realizado algunos retoques y se puede ver aquí el draft: http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/, ya sé, se mantiene en draft por lo cual todavía está dispuesto a cambios, sin embargo bien vale seguirlo.

Se preguntarán como viene la mano. Bueno pues, sucede que es bien conocida en la comunidad de programadores que trabajar con anchos en porcentajes más paddings o margins en los css no siempre hace que nuestras medidas relativas sean tratadas como queramos que sean tratadas, esto más bien es por el problema que el padding más el margin no son agregados al ancho que definimos en porcentaje en nuestras medidas relativas. Bien, pues Flexible Box viene para sustentar este y muchos otros asuntos.

Compararíamos al flexbox con el ya ampliamente utilizado block layout y sus propiedades de floats y clear.

Todo empieza con display:flex, aquí se define que usaremos este nuevo layout, esto lo ponemos como atributo a un div o a algun elemento que contenga lo que necesitemos ordenar en la presentación.

Realizar el centrado de los textos es muchos más facil ahora que nunca:

Dentro del contenedor principal agregué un contenedor más con un texto. Al contenedor principal solamente además de display:flex agregué otros atributos justify-content:center; y align-items: center; para lograr el centrado.

Flexbox trata al contenido por defecto como columnas del mismo alto, estas columnas serán tratadas de manera proporcional al ancho del contenedor principal, probemos esto:

Agregué tres contenedor con imagenes y texto, con simples definiciones de ancho para cada uno, logré una homogenea distribución de los contenedores con margin y todo.

¿Que pasaría si modificamos el ancho de uno de ellos?, agregué a la pseudo-clase hover de uno de los contenedores un aumento de ancho una vez que el cursor se encuentre encima con un pequeño efecto de transición transition: all .3s ease-out;.

Podemos ver como los demás contenedores son redimensionados para seguir manteniendo un ancho acorde al contenedor padre automáticamente, nuestros contenedores no salieron del contenedor padre ni tampoco fueron abajo aumentando su alto.

Esta y muchas otras ventajas harán que esta nueva especificación se encuentre inevitablemente en los sitios que se desarrollen en el futuro, así que no hay que dudar a la hora de mantenerse al tanto de las actualizaciones y por qué no, si es que nuestros usuarios utilizan navegadores actuales empezar a utilizarlo.