如何垂直对齐其中一个flex elemet孩子

Question

我在一个带有flex-direction:column的弹性容器中有3个垂直居中的div，我需要将第3个div放在容器的底部。

这是我想要的解释：https://jsfiddle.net/tom8p7be/

我该怎么做？谢谢。

Answer 1

您可以在第一个和最后一个子div上添加margin-top: auto。当你将margin-top: auto添加到last-child div时，它会将该div推送到父级的结尾，但它也会将其他两个div推送到父级的顶部。这就是为什么你还需要将margin-top: auto添加到first-child div，并将它们放置在从顶部到最后一个子div的空间中心。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.container div {
  margin: 5px;
  padding: 5px 10px;
  border: 1px solid;
}
.container > div:last-child,
.container > div:first-child{
  margin-top: auto;
}

<div class="container">
    <div>This div should be vertically centered</div>
    <div>This one too</div>
    <div>And this div shoud be placed at the bottom of the flex container</div>
</div>