垂直对齐的flexbox元素

Question

旧display:box能够垂直对齐元素，因此对于 N 元素数量 H 定义的高度，它们会自行对齐（< em>垂直）与父元素有关。

有没有办法使用当前的dislpay:flex系统实现这一目标？

Answer 1

您正在寻找弹性规则justify-content: space-between;。把它放在你的父元素上它会对齐项目，所以第一个接触容器的开头，最后一个接触容器的末端，剩下的空间分布在元素之间。

您还可以使用align-items在垂直于弯曲方向的方向上对齐元素。例如，如果您的flex-direction为column（垂直），则justify-content将垂直对齐项目，align-items将水平对齐它们。相反，如果您的flex-direction为row（水平），则justify-content将水平对齐项目，align-items将垂直对齐。

此处有更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

使用display: flex，您可以justify-content进行水平对齐，align-items进行垂直对齐。