为啥显示：-ms-flex； -ms-justify-content：中心；不能在 IE10 中工作？ [关闭]

Posted 2023-03-04

【中文标题】为啥显示：-ms-flex； -ms-justify-content：中心；不能在 IE10 中工作？ [关闭]

【英文标题】：Why does display: -ms-flex; -ms-justify-content: center; not work in IE10? [closed]为什么显示：-ms-flex； -ms-justify-content：中心；不能在 IE10 中工作？ [关闭]

【发布时间】：2013-07-15 18:35:19

【问题描述】：

为什么下面的代码在 IE10 中不起作用？

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

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

【问题讨论】：

请显示您的 html 标记和 css 样式

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

【参考方案1】：

IE10 实现了来自March 2012 的 Flexbox 草案。这些属性对应于这些：

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

【讨论】：

谢谢。这行得通。所以 IE 使用旧语法。

对于未来的搜索者：我注意到的一个问题是，当使用 Autoprefixer 或 Stylus 提供旧语法时，在 IE10 中，设置为 -ms-flex: 1 的 flexbox 子项也需要显示值内联块或块。因此，在您更改其显示设置之前，span 元素或任何默认为 display:inline 的元素在用于 flexbox 布局时可能无法按预期运行。

【参考方案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;
    

【讨论】：

这也是设置一堆你甚至不需要的属性的好方法。

感谢您链接到该网站。