Расположение блоков Css

Question

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

Answer 1

.wrapper {
  display: flex;  
  height: 250px;
  gap: 10px;
  border: 1px solid grey;
  width: max-content;
}

.wrapper div {
  width: 100px;
  height: 100px;
  background: blue;
}

.wrapper div:nth-child(2), .wrapper div:nth-child(3) {
  align-self: center;
}

.wrapper div:nth-child(4){
  align-self: end;
}

<div class='wrapper'>
  <div> </div>
  <div> </div>
  <div> </div>
  <div> </div>
</div>

БЛОГ НА HUSL

Расположение блоков Css

Ответы (1 шт):