Flexbox align-self:flex-start/end 是水平调整而不是垂直调整

【问题标题】：Flexbox align-self:flex-start/end is adjusting horizontally not verticallyFlexbox align-self:flex-start/end 是水平调整而不是垂直调整
【发布时间】：2018-10-30 18:48:19
【问题描述】：

在我的弹性容器中，我已经成功了

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

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

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

Codepen

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

【问题讨论】：

您好，您能解释一下它的外观吗？我真的不明白这个问题..
你希望标题放在容器顶部，内容放在中心，对吧？
那是因为flex-direction: column 切换轴。
我同意 VXp，去掉 flex-direction: 列。在你的 codepen 上试一试，效果很好

标签： html css sass flexbox

【解决方案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 元素将位于标题下方。

【讨论】：

完美！我想我只是有点困惑，因为我认为在容器上使用 flex-direction: column; align-items: center 和在孩子上使用 align-self: flex-start 的全部意义会将孩子移动到容器的顶部