这是我正在处理的代码:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 150px;
background-color: #cbcbcb;
}
<div class="container">
<div>should be on the TOP</div>
<div>should be on the BOTTOM</div>
</div>
我在 Firefox 中得到了可预测的结果:
但在 Chrome 中我得到下一个结果:
为什么我在底部元素下得到这个空间?
它可以通过将 css min-height
更改为 height
来修复,但在我的上下文中,重要的是在此处设置 min-height
值.
附言此行为仅在 Chrome 和 Canary 中重现,并且似乎仅在 Windows 上出现。
我的环境:Chrome 版本 56.0.2924.87(64 位)和 Win 10
最佳答案
它确实看起来像一个错误。
在任何情况下,您都可以使用 auto
边距来解决它:
.container {
display: flex;
flex-direction: column;
min-height: 150px;
background-color: #cbcbcb;
}
.container > div:last-child {
margin-top: auto;
}
<div class="container">
<div>should be on the TOP</div>
<div>should be on the BOTTOM</div>
</div>
Flex auto
边距是规范的一部分,可用于对齐 flex 元素。
完整解释在这里:In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
关于html - Chrome 中是否存在带有 justify-content : space-between and min-height? 的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42161458/