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

score 6 · Accepted Answer · answered Jan 24 '17 at 03:56

6

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>

answered Jan 24 '17 at 03:56

Oriol

274,082
63
437
513

This answer is better because when the content is large and fills the entire parent block, it remains inside the parent block and does not go beyond the boundaries of the parent. – Gleb Kemarsky Jul 04 '20 at 18:49

score 2 · Answer 2 · answered Jan 24 '17 at 06:41

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>

Flexbox align item vertical 1/3

2 Answers2