为什么在IE10中display: -ms-flex; -ms-justify-content: center;无法正常工作？

Question

为什么以下代码在IE10中无法运行？

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

我需要写什么才能让它们工作？

- user2590633

---

请展示您的HTML标记和CSS样式。 - Danield

我认为 justify-content 在 IE 中不起作用，因为：http://css-tricks.com/almanac/properties/j/justify-content/ - user2590633

显示：-ms-flex不存在....应该是display：-ms-flexbox。 - CSSBurner

Answer 1

IE10实现了2012年3月的Flexbox草案。这些属性对应于以下内容：

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

- cimmanon

---

谢谢。它有效。所以IE使用旧语法。 - user2590633

供未来搜索者参考：我注意到一个陷阱，当使用Autoprefixer或Stylus来提供旧语法时，在IE10中，设置为-ms-flex:1的flexbox子项还需要一个inline-block或block的显示值。因此，在flexbox布局中使用span元素或任何默认为display:inline的元素可能无法按预期工作，直到您更改其显示设置。 - RwwL

Answer 2

试图在各种浏览器中获得正确的语法时，一个很好的起点是http://the-echoplex.net/flexyboxes/

要在容器内水平和垂直居中元素，您可以使用类似以下代码的方式：（适用于Chrome、FF、Opera 12.1+和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;
    }

}

- Danield

---

这也是一种好的方式，可以设置许多你甚至不需要的属性。 - cimmanon

感谢您链接到该网站。 - shuhalo