导航栏中的Flexbox：无法垂直对齐项目

Question

我真的是html和CSS的新手，所以这是我第一次尝试制作导航栏，导航栏中的项目卡在页面顶部，请告诉我哪里出了问题

https://codepen.io/galia-s/pen/GRojmwV

.flex-content {
  display: flex;
  margin: auto 3.25rem;
  align-items: center;
}

Answer 1

根据您要实现的目标，您可能会看着align-content而不是align-items。我假设您想将这些项目居中。

因此您的.flex-content类可能如下所示：

.flex-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 5rem; //set height here instead of header
}

希望有帮助。

Answer 2

您发布的信息太少，无法获得可靠的答案，但是无论如何：要使flex-item垂直堆叠，您必须在flex容器中添加flex-direction: column;。