0

Подскажите, пожалуйста, как с помощью flex расположить 3 элемента следующим образом: 1-й элемент строго сверху; 2-й элемент строго по центру; 3-й элемент (внимание) - строго по центру в промежутке МЕЖДУ 2-ым элементом и нижним краем. Картинка, как надо во вложении. Делал flex-direction: column; justify-content: space-between; И элементы разбегаются по краям. Почти нужно так, но вот как третий разместить, не знаю. Помогите, пожалуйста.введите сюда описание изображения

1 ответ 1

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>

1
  • хороший вариант, но мне не совсем подходит. мне необходимо, что все элементы находились в одном column, не разбиваясь на part1 и part2.
    – rabbit
    18 мар 2020 в 18:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.