flex-grow 在 Internet Explorer 11 (IE11) 中无法正确呈现
flex-grow isn't rendering correctly in Internet Explorer 11 (IE11)
我尝试了一种新的 html 弹性盒子设计。 Chrome58 Version 58.0.3029.110 中的设计是正确的,但在 IE11 中不是。其他浏览器我没试过。
问题是什么?
body {
display: flex;
flex-flow: row wrap;
}
#left {
flex: 6 0%;
display: flex;
flex-flow: row wrap;
}
#right {
flex: 1 0%;
background-color: black;
}
#top {
flex: 1 100%;
background-color: red;
}
#nav {
flex: 1 0%;
background-color: green;
}
#main {
flex: 6 0%;
background-color: blue;
}
#notepad {
flex: 1 0%;
background-color: yellow;
}
#chat {
flex: 6 0%;
background-color: orange;
}
#break {
flex: 1 100%;
}
<div id="left">
<div id="top">test</div>
<div id="nav">test</div>
<div id="main">test</div>
<div id="break"></div>
<div id="notepad">test</div>
<div id="chat">test</div>
</div>
<div id="right">test</div>
主要问题是 IE11 充斥着与 flexbox 相关的错误 (flexbugs)。
具体问题是 flex-grow
不够强大,无法在 IE11 中包装弹性项目。
您的代码中有此规则:flex: 1 100%
。它使用 shorthand 属性 分解为:
flex-grow: 1
flex-shrink: 1
(by default)
flex-basis: 100%
因为你已经将 flex-basis
设置为 100%
,并且容器设置为 wrap
,所以 应该 足以获取要包装的后续项目。
由于 flex-basis: 100%
消耗了该行中的所有 space,因此没有 space 剩余用于其他项目。所以他们必须包装。 Chrome 明白了。
但是,无论出于何种原因,IE11 都会看到后续项目设置为 flex: 1 0%
并表示:
Okay, flex-grow
is set to 1
, but there's no free space on the line. So there's no space to distribute. And flex-basis
is set to 0
. This item must be width: 0
. No need to wrap anything.
要解决此逻辑,同时保持跨浏览器兼容性,请为必须换行的项目添加一些宽度。尝试 flex-basis: 1px
而不是 flex-basis: 0
.
#nav {
flex: 1 1px;
background-color: green;
}
#notepad {
flex: 1 1px;
background-color: yellow;
}
我尝试了一种新的 html 弹性盒子设计。 Chrome58 Version 58.0.3029.110 中的设计是正确的,但在 IE11 中不是。其他浏览器我没试过。
问题是什么?
body {
display: flex;
flex-flow: row wrap;
}
#left {
flex: 6 0%;
display: flex;
flex-flow: row wrap;
}
#right {
flex: 1 0%;
background-color: black;
}
#top {
flex: 1 100%;
background-color: red;
}
#nav {
flex: 1 0%;
background-color: green;
}
#main {
flex: 6 0%;
background-color: blue;
}
#notepad {
flex: 1 0%;
background-color: yellow;
}
#chat {
flex: 6 0%;
background-color: orange;
}
#break {
flex: 1 100%;
}
<div id="left">
<div id="top">test</div>
<div id="nav">test</div>
<div id="main">test</div>
<div id="break"></div>
<div id="notepad">test</div>
<div id="chat">test</div>
</div>
<div id="right">test</div>
主要问题是 IE11 充斥着与 flexbox 相关的错误 (flexbugs)。
具体问题是 flex-grow
不够强大,无法在 IE11 中包装弹性项目。
您的代码中有此规则:flex: 1 100%
。它使用 shorthand 属性 分解为:
flex-grow: 1
flex-shrink: 1
(by default)flex-basis: 100%
因为你已经将 flex-basis
设置为 100%
,并且容器设置为 wrap
,所以 应该 足以获取要包装的后续项目。
由于 flex-basis: 100%
消耗了该行中的所有 space,因此没有 space 剩余用于其他项目。所以他们必须包装。 Chrome 明白了。
但是,无论出于何种原因,IE11 都会看到后续项目设置为 flex: 1 0%
并表示:
Okay,
flex-grow
is set to1
, but there's no free space on the line. So there's no space to distribute. Andflex-basis
is set to0
. This item must bewidth: 0
. No need to wrap anything.
要解决此逻辑,同时保持跨浏览器兼容性,请为必须换行的项目添加一些宽度。尝试 flex-basis: 1px
而不是 flex-basis: 0
.
#nav {
flex: 1 1px;
background-color: green;
}
#notepad {
flex: 1 1px;
background-color: yellow;
}