Flexbox, min-height, margin auto 和 Internet Explorer [英] Flexbox, min-height, margin auto and Internet Explorer
问题描述
我使用 display: flex
和 margin: auto
来获得这种布局:
这适用于所有支持 Flexbox 的浏览器,甚至 IE.
但是,如果没有一个小例外:min-height
,那就太容易了.
您可以在此处找到一个简单的工作示例.在我的包装器上使用 min-height
时,最后一个元素不会被推到这个包装器的底部(仅限 IE).
我无法让它工作,你们女孩/男孩有什么想法吗?谢谢.
在 IE11 上测试
.wrapper {显示:弹性;弹性方向:列;最小高度:300px;边框:1px 纯灰色;填充:5px;}.元素 {高度:35px;边框:1px 纯灰色;边距:5px;}.element:last-child {边距顶部:自动;}
<div class="元素"></div><div class="元素"></div><div class="元素"></div><div class="元素"></div>
这是 IE 的 flexbox
实现中的一个错误:
在所有其他支持 flexbox 的浏览器中,基于 flex-direction:column
的 flex 容器将遵循容器 min-height
来计算 flex-grow
长度.在 IE10 &11-preview 它似乎只适用于明确的 height
值.
这似乎在 Microsoft 的关注范围内,并将在未来的某个时候修复:
<块引用>很遗憾,我们无法在即将发布的版本中解决此反馈.我们将考虑您对未来版本的反馈.我们将保持此连接反馈错误处于活动状态以跟踪此请求.
目前简单的解决方案是使用高度:
.wrapper {边框:1px 纯灰色;box-sizing: 边框框;显示:弹性;弹性方向:列;高度:300px;填充:5px;}.元素 {边框:1px 纯灰色;高度:35px;边距:5px;}.element:last-child {边距顶部:自动;}
<div class="元素"></div><div class="元素"></div><div class="元素"></div><div class="元素"></div>
但这有一个限制,如果添加更多 .element
,框就不会增长,所以可能不是你想要的.
虽然它确实需要一个额外的包含元素,但似乎有一种有点hacky的方式来实现这一点:
.container {显示:表;最小高度:300px;宽度:100%;}.包装{边框:1px 纯灰色;box-sizing: 边框框;显示:弹性;弹性方向:列;高度:100%;最小高度:300px;填充:5px;}.元素 {边框:1px 纯灰色;高度:35px;边距:5px;}.element:last-child {边距顶部:自动;}
<div class="wrapper"><div class="元素"></div><div class="元素"></div><div class="元素"></div><div class="元素"></div>
这会添加一个容器(.container
),将其设置为display: table;
并赋予它max-height: 300px;
.height: 100%;
然后添加到 .wrapper
以使其适合 .container
的整个高度(实际上是 300px
) 从而使 IE 的行为与其他浏览器相同.
兼容的浏览器会忽略这一点,并将继续遵循 min-height: 300px;
设置在 .wrapper
上的规则.
I use to play with both display: flex
and margin: auto
to have this kind of layouts:
This works well on every browser supporting Flexbox, even IE.
However, it would have been too easy if there hadn't had a little exception: min-height
.
You can find a simple working example here. When using min-height
on my wrapper, the last element is not pushed to the bottom of this wrapper (IE only).
I can't get this to works, do you girls/guys have any idea? Thanks.
Testing on IE11
.wrapper {
display: flex;
flex-direction: column;
min-height: 300px;
border: 1px solid grey;
padding: 5px;
}
.element {
height: 35px;
border: 1px solid grey;
margin: 5px;
}
.element:last-child {
margin-top: auto;
}
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
This is a bug in IE's flexbox
implementation:
In all other browsers that support flexbox, a
flex-direction:column
based flex container will honor the containersmin-height
to calculateflex-grow
lengths. In IE10 & 11-preview it only seems to work with an explicitheight
value.
It appears that this is on Microsoft's radar and will be fixed some point in the future:
Unfortunately, we are not able to address this feedback in our upcoming release. We will consider your feedback for a future release. We will keep this connect feedback bug active to track this request.
Reply from Microsoft - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)
For now the simple solution is to use height:
.wrapper {
border: 1px solid grey;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 300px;
padding: 5px;
}
.element {
border: 1px solid grey;
height: 35px;
margin: 5px;
}
.element:last-child {
margin-top: auto;
}
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
But this has the limitation that the box wont grow if more .element
s are added so probably isn't what you are after.
There does appear to be a somewhat hacky way of achieving this although it does require an extra containing element:
.container {
display: table;
min-height: 300px;
width: 100%;
}
.wrapper {
border: 1px solid grey;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
min-height: 300px;
padding: 5px;
}
.element {
border: 1px solid grey;
height: 35px;
margin: 5px;
}
.element:last-child {
margin-top: auto;
}
<div class="container">
<div class="wrapper">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>
</div>
This adds a container (.container
), sets it to display: table;
and gives it max-height: 300px;
. height: 100%;
is then added to .wrapper
to get it to fit the full height of .container
(effectively 300px
) thus making IE behave the same as other browsers.
Compliant browsers ignore this and will continue to follow the min-height: 300px;
rule set on .wrapper
.
这篇关于Flexbox, min-height, margin auto 和 Internet Explorer的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!