html - 垂直对齐子元素在显示弹性列父元素上不起作用？

Question

我是 flex 新手，我有 2 个孩子，1 个我想居中，1 个在底部：

<div className="parent">
  <div className="main">center me</div>
  <div className="footer">put me on bottom</div>
<div>

这是我的风格：

.parent { 
  width:100%;
  display:flex
  flex-direction:column;
  height:100vh;
}
.main {
  align-self: center;
}
.footer {
  align-self: flex-end;
}

类的主要和页脚没有按我预期的那样工作？帮助？

标签： htmlcssflexbox