El diseño de Flexbox no funciona en Internet Explorer 10

http://jsfiddle.net/J8rL7/87/

De acuerdo con http://caniuse.com/#feat=flexbox

Debería funcionar para IE10 con prefijo de proveedor.

¡Pero no es así!

ACTUALIZACIÓN: Y acabo de registrar el último Firefox, parece completamente roto.

¿Por qué?

1
2
3
Total
Test
body, html{ width:100%; height:100%; margin:0; padding:0; } div{ text-align:center; } .box { display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center; display:-ms-box;-ms-box-pack:center;-ms-box-align:center; display:-moz-box;-moz-box-pack:center;-moz-box-align:center; }

Debes leer las notas muy de cerca en caniuse. El “soporte parcial” se refiere a admitir uno de los dos borradores anteriores, y no hacen una nota de qué navegador admite qué borrador. IE10 es compatible con el borrador de marzo de 2012 , y es el único que se sabe que lo hace.

http://codepen.io/cimmanon/pen/ApHEy

 .box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; /* fix for old FF */ width: 100%; } 

Para Firefox, necesitas dar un ancho a los elementos que quieres ver astackdos.

http://jsfiddle.net/J8rL7/101/

 #wrapper div {width:100%;}