Para que todos tengan claro esto: “Flexbox” (más específicamente: Módulo de diseño de caja flexible CSS) ha sufrido muchos cambios en los últimos tres años. Cambios tanto en la especificación como en lo que han implementado los navegadores.
Como decir
Si busca en Google sobre Flexbox, encontrará mucha información desactualizada. Así es como puede saberlo rápidamente:
Si está mirando una publicación de blog (o lo que sea) sobre Flexbox y ve display: box; o una propiedad que es box-{*}, está viendo la antigua versión 2009 de Flexbox.
Si está mirando una publicación de blog (o lo que sea) sobre Flexbox y ve display: flexbox; o la flex() función, estás ante una fase de tweener incómoda en 2011.
Si está mirando una publicación de blog (o lo que sea) sobre Flexbox y ve display: flex; y flex-{*} properties, está viendo la especificación actual (al momento de escribir este artículo).
Ejemplos de cosas obsoletas
Todo esto era fantástico en el momento en que se creó, pero ahora está desactualizado:
Flexie: un polyfill de JavaScript para Flexbox, utiliza la sintaxis antigua de 2009.
Este artículo de Richard Shepard en Smashing Magazine durante la incómoda fase de 2011. Menciona de pasada la sintaxis de 2011, pero se centra más en la sintaxis de 2009.
Stephen Hay ha estado escribiendo sobre Flexbox durante un buen tiempo. Su publicación de introducción usa la antigua sintaxis de 2009, luego hizo un seguimiento de la sintaxis de 2011, desafortunadamente, solo un mes antes de que se publicara la sintaxis actual.
La primera vez que me entusiasmé con Flexbox fue este artículo de Paul Irish, que usa la sintaxis de 2009. Presenta una advertencia en la parte superior, pero enlaza con el artículo de Stephen utilizando la sintaxis de 2011.
Apoyo
Las cosas se complican un poco más en términos de compatibilidad con el navegador.
La antigua sintaxis de 2009 tiene un “soporte” de navegador sorprendentemente bueno: Chrome, Firefox 2+, Safari 3.1 +… Prácticamente todo, excepto IE 9- y Opera cualquier cosa. Digo “soporte” porque las implementaciones reales fueron parciales y diferían un poco (de ahí la reescritura).
A pesar de tener más soporte, no es inteligente usar la sintaxis anterior. La vieja especificación se ha ido con el viento. Los navegadores podrían dejar de admitir la sintaxis anterior en el futuro. Al menos, es muy probable que la nueva sintaxis sea más fácil de entender y se implemente de manera más profunda y coherente. Los navegadores que aún no son compatibles con Flexbox implementarán la nueva especificación, que se encuentra en estado “CR” (recomendación candidata).
Nueva sintaxis El soporte es: Chrome 21+, Safari 6.1+, Firefox 22+, Opera (y Opera Mobile) 12.1+, IE 11+ y Blackberry 10+.
Parece que el IE 10, que aún no se ha lanzado, se enviará con el incómodo tweener Flexbox (pantalla: flexbox;).
Manifestación
Recientemente ayudé a alguien con un problema de crear un diseño de columna Fluido-Fijo-Fluido. Ambas sintaxis son capaces de hacer esto fácilmente (de lo contrario, es bastante difícil). Serán buenas referencias para probar la compatibilidad del navegador (y el abandono del navegador).
Ejemplo de sintaxis ANTIGUA
Ejemplo de sintaxis NUEVA