Css 如何垂直对齐其中一个flex元素子元素

我在一个flex容器中有3个垂直居中的div，带有

flex direction:column

，我需要将第3个div放在容器底部

这是我想要的解释：

---

我怎样才能做到这一点？

您可以在第一个和最后一个子div上添加

页边距顶部：auto

。当您将

边距顶部：auto

添加到最后一个子div时，它会将该div推到父div的末尾，但也会将其他两个div推到父div的顶部。这就是为什么您还需要向第一个子div添加

margin-top:auto

，这将使它们位于从顶部到最后一个子div的空间中心

.container{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
最小高度：100vh；
}
.货柜组{
保证金：5px；
填充物：5px10px；
边框：1px实心；
}
.container>div:最后一个子级，
.container>div:第一个子级{
页边顶部：自动；
}

该div应垂直居中
这个也是
这个div应该放在flex容器的底部

您可以在第一个子div和最后一个子div上添加

页边距顶部：auto

。当您将

边距顶部：auto

添加到最后一个子div时，它会将该div推到父div的末尾，但也会将其他两个div推到父div的顶部。这就是为什么您还需要向第一个子div添加

margin-top:auto

，这将使它们位于从顶部到最后一个子div的空间中心

.container{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
最小高度：100vh；
}
.货柜组{
保证金：5px；
填充物：5px10px；
边框：1px实心；
}
.container>div:最后一个子级，
.container>div:第一个子级{
页边顶部：自动；
}

该div应垂直居中
这个也是
这个div应该放在flex容器的底部

谢谢！这对我有用，谢谢！这对我很有用。你想让2个居中的一个相对于最后一个分区的可用空间居中还是它们的父分区居中？你想让2个居中的一个相对于最后一个分区的可用空间居中还是它们的父分区居中？