Html 显示：flex 不适用于 Internet Explorer
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43979702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display: flex not working on Internet Explorer
提问by Oleg Verichko
My flex container:
我的弹性容器：
.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%;
}
On other browsers everything works.
ie11 : http://take.ms/68dHo;
chrome : http://take.ms/JhcEH
What's problem?
在其他浏览器上一切正常。
ie11 : http://take.ms/68dHo;
铬：http: //take.ms/JhcEH 有
什么问题？
回答by Paolo Forgia
Internet Explorer doesn't fully support Flexboxdue to:
由于以下原因，Internet Explorer 不完全支持Flexbox：
Partial support is due to large amount of bugs present (see known issues).
部分支持是由于存在大量错误（请参阅已知问题）。
Screenshot and infos taken from caniuse.com
截图和信息取自caniuse.com
Notes
笔记
Internet Explorer before 10 doesn't support Flexbox, while IE 10 only supports the 2012 syntax.
Internet Explorer 10 之前不支持 Flexbox，而 IE 10 只支持2012 语法。
Known issues
已知的问题
- IE 11 requires a unit to be added to the third argument, the flex-basis property see MSFT documentation.
- In IE10 and IE11, containers with
display: flexandflex-direction: columnwill not properly calculate their flexed childrens' sizes if the container hasmin-heightbut no explicitheightproperty. See bug. - In IE10 the default value for
flexis0 0 autorather than0 1 autoas defined in the latest spec. - IE 11 does not vertically align items correctly when
min-heightis used. See bug.
- 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。请参阅错误。
Workarounds
解决方法
Flexbugsis a community-curated list of Flexbox issues and cross-browser workarounds for them. Here's a list of all the bugs with a workaround available and the browsers that affect.
Flexbugs是一个社区策划的 Flexbox 问题列表以及针对这些问题的跨浏览器解决方法。这是所有可用解决方法的错误列表以及影响的浏览器。
- Minimum content sizing of flex items not honored
- Column flex items set to
align-items: centeroverflow their container min-heighton a flex container won't apply to its flex itemsflexshorthand declarations with unitlessflex-basisvalues are ignored- Column
flexitems don't always preserve intrinsic aspect ratios - The default flex value has changed
flex-basisdoesn't account forbox-sizing: border-boxflex-basisdoesn't supportcalc()- Some HTML elements can't be flex containers
align-items: baselinedoesn't work with nested flex containers- Min and max size declarations are ignored when wrapping flex items
- Inline elements are not treated as flex-items
- Importance is ignored on flex-basis when using flex shorthand
- Shrink-to-fit containers with
flex-flow: column wrapdo not contain their items - Column flex items ignore
margin: autoon the cross axis flex-basiscannot be animated- Flex items are not correctly justified when
max-widthis used
- 不遵守弹性项目的最小内容大小
- 列 flex 项目设置为
align-items: center溢出其容器 min-height在 flex 容器上将不适用于它的 flex 项目flexflex-basis忽略具有无单位值的速记声明- 列
flex项目并不总是保持固有的纵横比 - 默认的 flex 值已更改
flex-basis不考虑box-sizing: border-boxflex-basis不支持calc()- 一些 HTML 元素不能是 flex 容器
align-items: baseline不适用于嵌套的 flex 容器- 包装弹性项目时忽略最小和最大尺寸声明
- 内联元素不被视为弹性项目
- 使用 flex 速记时，基于 flex 的重要性被忽略
- 收缩到适合的容器
flex-flow: column wrap不包含他们的项目 - 列 flex 项目
margin: auto在横轴上忽略 flex-basis不能动画- Flex 项目在
max-width使用时未正确对齐
回答by adeguk Loggcity
Am afraid this question has been answered a few times, Pls take a look at the following if it's related
恐怕这个问题已经回答过几次了，如果相关请看以下内容
