Flexbox align item vertical 1/3

Question

Now I learned how to vertical centering an item with flexbox, but how can I align the item to the 1/3 position vertically? thanks

Answer 1

Assuming you mean the space below the flex item to be 3 times the space above, you can add pseudo-elements with flex-grow 1 and 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>

Answer 2

You can use transform: translate

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

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