martes, 26 de mayo de 2015

Viva Flexbox

Una idea básica de flexbox es que las dimensiones y posición de los bloques se puedan adaptar fácilmente a las dimensiones de su contenedor.

display: flex; en el contenedor permite comenzar a usarlo. Hay algunos conceptos nuevos que asimilar, como main axe, cross axe, direction, justify-content, align-content, align-items.

Esta guía visual puede ser muy util: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Varias cosas básicas que antes se resolvían de modo poco natural (como margin: 0 auto para centrado horizontal, o los trucos para hacer centrado vertical), se pueden resolver más fácilmente con flexbox.

La tabla de compatibilidad http://caniuse.com/#feat=flexbox asegura que ya podemos usar flexbox para todos los navegadores modernos.

Por la cuestión de la compatibilidad, hasta hace no mucho, se encontraban muchos peros en la documentación y los tutoriales sobre flexbox. En estos días, esos peros están desactualizados.

Puede encontrarse una guía más actualizada sobre el estado actual de flexbug y (técnicas para cuando hay problemas) en https://github.com/philipwalton/flexbugs

Empieza a usar flexbox. Y corre la voz! ^_^

Algunos ejemplos: