Html flex 属性在 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32239549/
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
flex property not working in IE
提问by Dizz
I have been unable to determine why flexbox is not working in IE 11.
我一直无法确定为什么 flexbox 在 IE 11 中不起作用。
For testing, I sourced a very simple flexbox layout from CodePen and have pasted the information below.
为了测试，我从 CodePen 获取了一个非常简单的 flexbox 布局，并粘贴了以下信息。
Chrome works as intended; IE11 fails.
Chrome 按预期工作；IE11 失败。
Image of layout-success running on Chrome:
在 Chrome 上运行的 layout-success 图片：
Image of layout-failure on IE11
IE11 上布局失败的图像
body {
background: #333;
font-family: helvetica;
font-weight: bold;
font-size: 1.7rem;
}
ul {
list-style: none;
}
li {
background: hotpink;
height: 200px;
text-align: center;
border: 2px solid seashell;
color: seashell;
margin: 10px;
flex: auto;
min-width: 120px;
max-width: 180px;
}
.flex {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}<ul class="flex">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>回答by Michael Benjamin
IE has a problem parsing the flexproperty.
IE 解析flex属性时出现问题。
Here are a few workarounds that have worked for me:
以下是一些对我有用的解决方法：
Use the long-hand properties instead of the shorthand.
Instead of something like this:
flex: 0 0 35%.Try this:
flex-grow: 0flex-shrink: 0flex-basis: 35%
使用简写属性而不是简写。
而不是这样的：
flex: 0 0 35%.尝试这个：
flex-grow: 0flex-shrink: 0flex-basis: 35%
Make sure
flex-shrinkis enabled.So instead of this:
flex: 0 0 35%Try this:
flex: 0 1 35%(In other cases
flex-shrinkneeds to be disabled: Flex item overlaps another item in IE11)
确保
flex-shrink已启用。所以而不是这个：
flex: 0 0 35%尝试这个：
flex: 0 1 35%（在其他情况下
flex-shrink需要禁用：Flex 项目与 IE11 中的另一个项目重叠）
Careful with percentage and unitless values with
flex-basisThis may depend on your version of IE11. Behavior appears to vary.
Try these variations:
flex: 1 1 0flex: 1 1 0pxflex: 1 1 0%
小心使用百分比和无单位值
flex-basis这可能取决于您的 IE11 版本。行为似乎各不相同。
试试这些变化：
flex: 1 1 0flex: 1 1 0pxflex: 1 1 0%
Beware!Certain css minifiers will replace 0pxwith 0, which can be a really annoying thing to debug (however, they won't change 0%for some reason).
谨防！某些 css minifiers 将替换0px为0，这对于调试来说可能是一件非常烦人的事情（但是，0%由于某种原因它们不会改变）。
More details here:
更多细节在这里：
- Image behavior within flexbox (rows embedded in columns)
- Why does shorthand flex property behave differently than long hand properties in IE?
Instead of
flex: 1useflex: auto(or add inflex-basis: auto)If you're using
flex: 1inflex-direction: row(such as on larger screens), and you switch toflex-direction: columnin a media query (let's say for mobile devices), you may find that your flex items collapse.In your media query, add
flex-basis: auto. This will override theflex-basisvalue in theflex: 1rule (which is usually0,0pxor0%, depending on the browser).Using
flex: autoshould also work, which is short for:flex-grow: 1flex-shrink: 1flex-basis: auto
而不是
flex: 1使用flex: auto（或添加flex-basis: auto）如果您使用
flex: 1inflex-direction: row（例如在更大的屏幕上），并且您flex-direction: column在媒体查询中切换到in（假设用于移动设备），您可能会发现您的 flex 项目折叠。在您的媒体查询中，添加
flex-basis: auto. 这将覆盖规则中的flex-basis值flex: 1（通常为0、0px或0%，具体取决于浏览器）。使用
flex: auto也应该有效，它的缩写是：flex-grow: 1flex-shrink: 1flex-basis: auto
- Use old-fashion
width/heightproperties instead offlex.
- 使用旧式
width/height属性而不是flex.
Use
blocklayout instead offlexlayout.You don't need to completely abandon flex layout. But for a particular container you may be able to get the job done with
display: blockinstead ofdisplay: flex; flex-direction: column.For example, in needing to use the padding trickto responsively embed a video in a flex item, the obstacle I faced was that some browsers don't work well with percentage padding (or margin) in a flex container.
To make it work I switched the
displayvalue on the flex item from this:/* a flex item, also a nested flex container */ #footer-container > article { display: flex; flex-direction: column; }to this:
#footer-container > article { display: block; }
使用
block布局而不是flex布局。你不需要完全放弃 flex 布局。但是对于特定的容器，您可以使用
display: block而不是display: flex; flex-direction: column.例如，在需要使用padding 技巧将视频响应地嵌入到 flex item 时，我面临的障碍是某些浏览器不能很好地处理 flex container 中的百分比填充（或边距）。
为了使它工作，我
display从这里切换了 flex 项目上的值：/* a flex item, also a nested flex container */ #footer-container > article { display: flex; flex-direction: column; }对此：
#footer-container > article { display: block; }
回答by Embedded_Mugs
For me, using
对我来说，使用
flex: 1 1 auto;
instead of
代替
flex: 1;
solved the flex issue on IE 11.
解决了 IE 11 上的 flex 问题。
回答by akshay kanyan
Just use flex:1 0 auto;. It will work.
只需使用flex:1 0 auto;. 它会起作用。
回答by Valentine Shi
As in @Michael_B answer, limit the growth with Flexbox flexproperty: flex: 0 1 (1/n - b)taken in % value, where nis the number of flex items in a row and bis the gap that you want to see between flex items in IE.
正如@Michael_B 的回答一样，使用 Flexboxflex属性限制增长：flex: 0 1 (1/n - b)以 % 值取值，其中n是一行中的 flex 项目数，b是您希望在 IE 中看到的 flex 项目之间的差距。
On the flex items along with flexproperty above use the max-widthproperty with percentage value of 1/n - b.
在 flex 项目以及flex上面的max-width属性上，使用百分比值为的属性1/n - b。
In your case the generalized CSS for the flex item would be:
在您的情况下，弹性项目的通用 CSS 将是：
li {
// ... the remaining code from your snippet
// Calculate the following manually and insert or use CSS preprocessor that does math for you.
// See the formula explanation above.
max-width: (your flex container max-width / 2) * 100% - b;
flex: 0 1 (your flex container max-width / 2) * 100% - b;
}
In actual case with 5 items / row there will be (1/5) * 100% - 1% = 19%=> max-width: 19%and flex: 0 1 19%;.
在实际情况下，每行 5 个项目将有(1/5) * 100% - 1% = 19%=>max-width: 19%和flex: 0 1 19%;.
Play with bparameter to make flex items short enough to allow flex: wrap;work.
使用b参数使 flex 项目足够短以允许flex: wrap;工作。
回答by Raa Vijay
In my case, the CSS minifier rejects the pxunit of the last argument in -ms-flexshorthand rule, I tried using %unit and it works fine.
就我而言，CSS minifier 拒绝速记规则中px最后一个参数的单位-ms-flex，我尝试使用%unit 并且它工作正常。
