flex 属性在 IE 中不起作用 [英] flex property not working in IE
问题描述
我一直无法确定为什么 flexbox 在 IE 11 中不起作用.
I have been unable to determine why flexbox is not working in IE 11.
为了测试,我从 CodePen 获取了一个非常简单的 flexbox 布局,并粘贴了以下信息.
For testing, I sourced a very simple flexbox layout from CodePen and have pasted the information below.
Chrome 按预期工作;IE11 失败.
Chrome works as intended; IE11 fails.
在 Chrome 上运行的 layout-success 图片:
Image of layout-success running on Chrome:
IE11 上布局失败的图片
Image of layout-failure on 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>
http://codepen.io/hankthewhale/pen/IdKkB?editors=110
推荐答案
IE 在解析 flex
属性时出现问题.
IE has a problem parsing the flex
property.
以下是一些对我有用的解决方法:
Here are a few workarounds that have worked for me:
使用简写属性而不是简写.
而不是这样的:flex: 0 0 35%
.
试试这个:
flex-grow: 0
flex-shrink: 0
flex-basis: 35%
确保
flex-shrink
已启用.
Make sure
flex-shrink
is enabled.
所以代替这个:flex: 0 0 35%
试试这个:flex: 0 1 35%
(在其他情况下flex-shrink
需要禁用:Flex项目与 IE11 中的另一个项目重叠)
(In other cases flex-shrink
needs to be disabled: Flex item overlaps another item in IE11)
使用
flex-basis
这可能取决于您的 IE11 版本.行为似乎各不相同.
This may depend on your version of IE11. Behavior appears to vary.
尝试这些变体:
flex: 1 1 0
flex: 1 1 0px
flex: 1 1 0%
注意!某些 css minifier 会将 0px
替换为 0
,这对于调试来说可能是一件非常烦人的事情(但是,它们不会t 因某种原因改变 0%
).
Beware! Certain css minifiers will replace 0px
with 0
, which can be a really annoying thing to debug (however, they won't change 0%
for some reason).
此处有更多详细信息:
代替
flex: 1
使用flex: auto
(或加入flex-basis: auto
)
Instead of
flex: 1
useflex: auto
(or add inflex-basis: auto
)
如果您在 flex-direction: row
中使用 flex: 1
(例如在较大的屏幕上),并且您切换到 flex-direction:
列 在媒体查询中(比方说对于移动设备),您可能会发现您的 flex 项目折叠起来.
If you're using flex: 1
in flex-direction: row
(such as on larger screens), and you switch to flex-direction: column
in a media query (let's say for mobile devices), you may find that your flex items collapse.
在您的媒体查询中,添加flex-basis: auto
.这将覆盖 flex: 1
规则中的 flex-basis
值(通常是 0
、0px
或0%
,取决于浏览器).
In your media query, add flex-basis: auto
. This will override the flex-basis
value in the flex: 1
rule (which is usually 0
, 0px
or 0%
, depending on the browser).
使用 flex: auto
应该也可以,它的缩写是:
Using flex: auto
should also work, which is short for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
- 使用老式的
width
/height
属性代替flex
.
使用
block
布局而不是flex
布局.
Use
block
layout instead offlex
layout.
你不需要完全放弃 flex 布局.但是对于特定的容器,您可以使用 display: block
而不是 display: flex; 来完成工作.flex-direction: 列
.
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: block
instead of display: flex; flex-direction: column
.
例如,在需要使用填充技巧来响应性地将视频嵌入到 flex item 时,我遇到了障碍面临的问题是某些浏览器不能很好地处理 flex 容器中的百分比填充(或边距).
For example, in needing to use the padding trick to 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.
为了让它工作,我从这个 flex 项目上切换了 display
值:
To make it work I switched the display
value on the flex item from this:
/* a flex item, also a nested flex container */
#footer-container > article {
display: flex;
flex-direction: column;
}
为此:
#footer-container > article {
display: block;
}
这篇关于flex 属性在 IE 中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!