垂直对齐的弹性盒元素

Question

旧的

display: box

能够垂直对齐元素，因此对于 N 个具有 H 定义高度的元素，它们将相对于父元素对齐（垂直）排列。

有没有办法使用当前的

display: 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

进行垂直对齐。