javascript - container - flexbox grid

¿Existe algún polyfill para el módulo de diseño de caja flexible CSS actual según W3C CR(pantalla: flex etc.)?

Question

Flexiejs.com tiene un polyfill de navegador para los cuadros de flexión de CSS, pero se basa en un borrador anterior sobre el tema, que es incompatible con el actual Módulo de diseño de caja flexible de CSS de la Recomendación del candidato del W3C. ¿Hay algún relleno de plástico, al menos parcial, para cajas de flexión como se define en el CR?

Answer 1

Respuesta actualizada 2014

En resumen: en el momento de escribir (octubre de 2014), no hay un polyfill de javascript que implemente la Recomendación de candidato del W3C.

Hay 2 implementaciones de polyfill de javascript:

1. Flexie.js apenas tuvo actualizaciones desde mediados de 2012 ( consulte el gráfico de contribución ) y solo es compatible con el modelo Flexbox 2009 , lo que significa un conjunto limitado de propiedades.

2. Reflexie.js aún no se ha tocado en el momento de escribir (octubre de 2014), y como lo señaló Ilya Streltsyn en el comentario de otra respuesta, "sigue siendo ''Sooooo no está listo para el horario estelar''", según el autor en la página principal de el proyecto El último compromiso se realizó el 1 de noviembre de 2012 ...

Recursos

• Flexie.js en Github
• Reflexie.js en Github

Answer 2

Actualmente no hay ningún relleno de polietileno que implemente la Recomendación de candidato del W3C.

El autor de flexie.js mencionó hace algún tiempo que estaba trabajando en la actualización de flexie.js, pero no se ha publicado nada desde entonces. Así que es difícil decir si o cuándo se materializará.

Answer 3

Hay un recurso fantástico por Chris Coyier en:

http://css-tricks.com/using-flexbox/

El problema es que hay tres borradores en uso para flexbox. El artículo de Chris Coyier repasa las tres versiones y cómo intercalarlas para la compatibilidad con varios navegadores. He extraído los bits relevantes a continuación.

Para la display:flex :

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;

Para flex:1 :

-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */

Por order:1 :

-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;

Él reclama apoyo para:

• Chrome cualquiera
• Firefox cualquiera
• Safari cualquiera
• Opera 12.1+
• IE 10+
• iOS cualquiera
• Android cualquiera

Creo que el resto de las propiedades de flexbox no han sido revisadas, así que puedes usar el conjunto de prefijos "estándar" ( -ms , -webkit , -webkit, sin prefijo).