display:flex无法在Internet Explorer上运行

Question

我的flex容器:

.back_pattern {
    display: flex;
    display: -ms-flexbox;
    -ms-flex-pack: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
}

在其他浏览器上一切正常.
ie11:http://take.ms/68dHo ;
chrome:http://take.ms/JhcEH有
什么问题？

Answer 1

由于以下原因,Internet Explorer不完全支持Flexbox:

部分支持是由于存在大量错误(参见已知问题).

_{截图和信息来自caniuse.com}

已知的问题:

• IE 11需要将一个单元添加到第三个参数,flex-basis属性请参见MSFT文档.
• 在IE10和IE11中,如果容器具有但没有明确的属性,则容器具有display: flex并且flex-direction: column将不会正确计算其弯曲的子尺寸.看错误.min-heightheight
• 在IE10中,默认值flex是0 0 auto而不是0 1 auto最新规范中定义的值.
• IE 11在min-height使用时不会正确地垂直对齐项目.看错误.

解决方法

Flexbugs是一个由社区策划的Flexbox问题列表,以及针对它们的跨浏览器解决方法.以下是可用解决方法和影响的浏览器的所有错误列表.

1. 不受尊重的弹性项目的最小内容大小
2. 列flex项目设置为align-items: center溢出其容器
3. min-height 在Flex容器上将不适用于其flex项目
4. flexflex-basis忽略无单位值的简写声明
5. 列flex项并不总是保留固有的宽高比
6. 默认弹性值已更改
7. flex-basis 不占 box-sizing: border-box
8. flex-basis 不支持 calc()
9. 某些HTML元素不能是flex容器
10. align-items: baseline 不适用于嵌套的Flex容器
11. 包装弹性项时,将忽略最小和最大大小声明
12. 内联元素不被视为flex项
13. 使用flex速记时,在弹性基础上忽略重要性
14. 收缩容器flex-flow: column wrap不包含其物品
15. margin: auto在四维轴上忽略列弹性项目
16. flex-basis 不能动画
17. Flex的项目时,没有正确合理max-width使用