Flexbox,最小高度,margin自动和Internet Explorer [英] Flexbox, min-height, margin auto and Internet Explorer
问题描述
我使用 display:flex
和 margin:auto
来使用这种布局:
这在支持Flexbox的每个浏览器上都可以正常工作,即使是IE。
,如果没有少许例外: min-height
。
可以在这里找到一个简单的工作示例。在我的包装器中使用 min-height
时,最后一个元素不会推送到此包装器的底部(仅限IE)。
我不能让这个工作,你女孩/家伙有什么想法吗?感谢。
在IE11上测试
.wrapper {display:flex; flex-direction:column; min-height:300px; border:1px solid gray; padding:5px;}。element {height:35px; border:1px solid gray; 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>
这是IE的 flexbox
实施中的一个错误:
在支持flexbox的所有其他浏览器中,基于flex的方法:
flex-direction:column
容器min-height
来计算flex-grow
长度。在IE10& 11-preview它似乎只有一个明确的height
值。
这似乎是微软的雷达将在以后的某个时间固定:
不幸的是,我们无法在我们的即将发布的版本中解决这个反馈。我们将考虑您对未来版本的反馈。我们将保持此连接反馈错误,以跟踪此请求。
从Microsoft回复 - href =https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview #tabsrel =nofollow> https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie -10-11-preview#tabs )
现在简单的解决方案是使用height:
.wrapper {border:1px solid gray; box-sizing:border-box;显示:flex; flex-direction:column; height:300px; padding:5px;}。element {border:1px solid gray; 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>
但是这有一个限制,如果添加更多 .element
,盒子不会增长,所以可能不是你之后。
似乎有一个有点黑客的方法来实现这一点,虽然它需要一个额外的包含元素:
.container {display:table; min-height:300px; width:100%;}。wrapper {border:1px solid gray; box-sizing:border-box;显示:flex; flex-direction:column;高度:100%; min-height:300px; padding:5px;}。element {border:1px solid gray; 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>
容器( .container
),将其设置为 display:table;
height:300px; 。 height:100%; 然后添加到
.wrapper
,使其适合 .container
(有效地 300px
),从而使IE的行为与其他浏览器相同。
合规浏览器会忽略此操作,并会继续遵循 min-height:300px;
$ c> .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,最小高度,margin自动和Internet Explorer的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!