Flexbox align item vertical 1/3

Question

Теперь я узнал, как вертикально центрировать элемент с помощью flexbox, но как я могу привести элемент в положение 1/3 по вертикали? благодаря

Answer 1

Предполагая, что вы имеете в виду пространство ниже гибкого элемента, чтобы быть в 3 раза пространство выше, вы можете добавить псевдо-элементы с flex-grow 1 и 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

Вы можете использовать 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>