HTML – Chrome中是否存在带有对齐内容的错误：space-between和m

这是我正在处理的代码：

.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

解决方法

在任何情况下,您都可以使用自动保证金解决它：

.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?

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!