Сетка Flexbox: как отображать 3 элемента рядом друг с другом, но с разным вертикальным положением

Question

Красные поля - это элементы, серый фон - это контейнер:

У меня есть 3 элемента, которые я хочу отобразить в контейнере. Пожалуйста, смотрите прилагаемое изображение. Каков наилучший способ сделать это с помощью flexbox? Это должно быть то же самое на мобильном представлении. Спасибо

Answer 1

Используйте flexbox с nth-child, чтобы изменить конкретную высоту объектов flex.

EX:

//HTML
<div class="container">
    <div class="flex"></div>
    <div class="flex"></div>
    <div class="flex"></div>
</div>

//CSS
.container{
  background: #AAA;
  border: 1px solid black;
  display: flex;
  height: 15vw;
  width: 20vw;
  }
.flex{
  background: #F00;
  height: 7vw;
  margin-left: 1.25vw;
  width: 5vw;
  }
.flex:nth-child(1){
  margin-top: 6vw;
  }
.flex:nth-child(2){
  margin-top: 1vw;
  }
.flex:nth-child(3){
  margin-top: 5vw;
  }

Смотрите пример здесь: https://jsfiddle.net/mn8ukbae/7/

Answer 2

с помощью flex у вас есть свойство align-self, которое можно использовать для выравнивания элемента по поперечной оси в отличие от других элементов в пределах одного и того же родительского элемента flex.

.container { display: flex; }
.item--1 { align-self: flex-end; }
.item--2 { align-self: flex-start; }
.item--3 { align-self: center; }

Я мог бы почти поспорить, что это «домашнее задание», и вы бы хорошо прочитали flex и align-self, чтобы максимально использовать его.