Flexbox 对齐项目垂直 1/3

Question

现在我学会了如何使用 flexbox 垂直居中项目，但是如何将项目垂直对齐到 1/3 位置？谢谢

Answer 1

假设您的意思是弹性项目下方的空间是上方空间的 3 倍，您可以添加带有flex-grow1 和 3 的伪元素：

#container {
  display: flex;
  flex-direction: column;
  height: 200px;
  background: #aaf;
}
#container > div {
  height: 50px;
  background: #afa;
}
#container::before {
  content: '';
  flex: 1;
}
#container::after {
  content: '';
  flex: 3;
}

<div id="container">
  <div>Content</div>
</div>