HTML – Chrome中是否存在带有对齐内容的错误:space-between和m
发布时间:2020-12-24 23:39:30 所属栏目:资源 来源:网络整理
导读:这是我正在处理的代码: .container { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; background-color: #cbcbcb;} div class="container" divshould be on the TOP/div divshould be on the BOTTOM/div/di
这是我正在处理的代码: .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值很重要. Try it in jsFiddle 附:此行为仅在Chrome和Canary中重现,并且似乎仅在Windows上. 我的环境:Chrome版本56.0.2924.87(64位)和Win 10 解决方法它当然看起来像一个bug.在任何情况下,您都可以使用自动保证金解决它: .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自动边距是规范的一部分,可用于对齐flex项目. 这里有完整的解释:In CSS Flexbox,why are there no “justify-items” and “justify-self” properties? (编辑:海南站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |