Flexbox对齐项目垂直1/3

Question

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

Answer 1

您可以使用transform: translate

＆＃13;

＆＃13;

#container {
  display: flex;
  flex-direction: column;
  height: 180px;
  background: gray;
}
#container > div {
  position: relative;
  top: 33%;
  transform: translateY(-33%);
  background: lightgray;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

假设你的意思是灵活项目下方的空间是上面空间的3倍，你可以添加flex-grow 1和3的伪元素：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;