Подскажите, пожалуйста, как с помощью flex расположить 3 элемента следующим образом:
1-й элемент строго сверху;
2-й элемент строго по центру;
3-й элемент (внимание) - строго по центру в промежутке МЕЖДУ 2-ым элементом и нижним краем.
Картинка, как надо во вложении. Делал flex-direction: column; justify-content: space-between; И элементы разбегаются по краям. Почти нужно так, но вот как третий разместить, не знаю. Помогите, пожалуйста.
Добавить комментарий
|
1 ответ
Как то так.
.column,
.part1,
.part2{
display:flex;
flex-direction:column;
}
.column{
border: 1px solid red;
padding-left: 10px;
height: 200px;
}
.part1,
.part2{
height: 50%;
}
.part1{
justify-content:space-between;
}
.part2{
justify-content:center;
}
.text-1,
.text-2,
.text-3{
width: 10px;
height: 10px;
}
.text-1{
background-color: yellow;
}
.text-2{
background-color: red;
}
.text-3{
background-color: black;
}
<div class="column">
<div class="part1">
<div class="text-1"></div>
<div class="text-2"></div>
</div>
<div class="part2">
<div class="text-3"></div>
</div>
</div>
-
хороший вариант, но мне не совсем подходит. мне необходимо, что все элементы находились в одном column, не разбиваясь на part1 и part2.– rabbit18 мар 2020 в 18:44