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

Posted 2023-03-07

【中文标题】Flexbox align-self:flex-start/end 是水平调整而不是垂直调整

【英文标题】：Flexbox align-self:flex-start/end is adjusting horizontally not vertically

【发布时间】：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 上试一试，效果很好

【参考方案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 的全部意义会将孩子移动到容器的顶部