css css3 internet-explorer-10 flexbox justify

css - ¿Por qué muestra:-ms-flex;-ms-justificar-contenido: centro; ¿No funciona en IE10?



css3 internet-explorer-10 (2)

¿Por qué no funciona el siguiente código en IE10?

.foo { display: -ms-flex; -ms-justify-content: center; }

¿Qué necesito escribir para que funcionen?


IE10 implementó el borrador de Flexbox desde marzo de 2012 . Esas propiedades corresponden a estas:

.foo { display: -ms-flexbox; -ms-flex-pack: center; }


Un buen lugar para comenzar cuando se intenta obtener la sintaxis correcta para todos los navegadores es http://the-echoplex.net/flexyboxes/

Para centrar los elementos horizontal y verticalmente en un contenedor, obtendrás un código similar a este: (trabajando en Chrome, FF, Opera 12.1+ e IE 10+)

FIDDLE

<div class="flex-container"> <div class="flex-item">A</div> <div class="flex-item">B</div> <div class="flex-item">C</div> </div>

CSS

.flex-container { height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-item { width: 100px; height:100px; background: brown; margin: 0 10px; } /* Legacy Firefox implementation treats all flex containers as inline-block elements. */ @-moz-document url-prefix() { .flex-container { width: 100%; -moz-box-sizing: border-box; } }