CSS中的Flex布局是一種強(qiáng)大的CSS特性，它允許你輕松地在容器中排列、對齊和分布空間，在垂直方向上設(shè)置Flex布局，你可以通過調(diào)整align-items屬性來實(shí)現(xiàn)。

align-items屬性定義了Flex子項(xiàng)在垂直方向上的對齊方式，以下是一些常見的值：

flex-start子項(xiàng)會排列在容器的頂部，這是默認(rèn)值。

flex-end子項(xiàng)會排列在容器的底部。

center子項(xiàng)會排列在容器的中央。

baseline子項(xiàng)的***行文字會排列在容器的中央，其他行文字則根據(jù)字體大小進(jìn)行對齊。

如果你想要讓子項(xiàng)在垂直方向上居中對齊，你可以這樣設(shè)置：

.container {
  display: flex;
  align-items: center;
}

還有一個(gè)重要的屬性是justify-content，它定義了Flex子項(xiàng)在水平方向上的對齊方式，如果你想要子項(xiàng)在水平方向上平均分布，可以這樣設(shè)置：

.container {
  display: flex;
  justify-content: space-between;
}

通過調(diào)整這些屬性，你可以輕松地在CSS中實(shí)現(xiàn)復(fù)雜的布局需求。