Html 如何将元素与容器的顶部和底部对齐？

我可以使用flexbox将所有元素与容器底部对齐。但我不知道如何将其中一个元素与容器顶部对齐。例如，在本例中，我无法将文本放到容器顶部

jQuery（文档）.ready（函数（$）{
$（'.slider'）。光滑({
速度:500,，
幻灯片放映：3
});
});
html，正文{
背景：#102131；
颜色：白色；
}
.集装箱{
位置：相对位置；
高度：400px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：柔性端；
}
.光滑滑块{
背景：#3a8999；
字体大小：20px；
文本对齐：居中；
宽度：90%
}

这篇文章应该放在最上面
滑块保持在文本的正上方
滑块保持在文本的正上方
滑块保持在文本的正上方
滑块保持在文本的正上方
滑块保持在文本的正上方
这篇文章应该放在底部
在flex容器内时，您可以使用
边距：auto
样式将项目推到容器的一侧或另一侧。在这种情况下，如果希望顶部元素紧靠容器顶部，请在顶部元素上使用
margin-bottom:auto

以下是您添加的代码片段：


jQuery（文档）.ready（函数（$）{
$（'.slider'）。光滑({
速度:500,，
幻灯片放映：3
});
});
html，正文{
背景：#102131；
颜色：白色；
}
.集装箱{
位置：相对位置；
高度：400px；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：柔性端；
}
.抱抱上衣{
页边距底部：自动；
}
.光滑滑块{
背景：#3a8999；
字体大小：20px；
文本对齐：居中；
宽度：90%
}

这篇文章应该放在最上面
滑块保持在文本的正上方
滑块保持在文本的正上方
滑块保持在文本的正上方
滑块保持在文本的正上方
滑块保持在文本的正上方
这篇文章应该放在底部