html - Flexbox 对齐 self :flex-start/end is adjusting horizontally not vertically

Question

在我的 flex 容器中，我已经做到了

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.child {
  align-self: flex-start;
}

出于某种原因，子元素没有调整到容器元素的顶部，而是水平调整。我对 flex 做错了什么吗？

Codepen

如果删除子元素css。它会调整回水平居中。

Answer 1

如果您希望在页面的顶部中心显示 title 元素，而内容远低于它，您可以使用

.title {
  align-self: center;
  justify-self: flex-start;
  padding: 2.4rem;
}

和内容

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

这应该可以解决问题。在任何其他情况下，调整边距或删除它们，content 元素将位于标题下方。