Как позиционировать элементы на flex по такому шаблону?

Question

Подскажите, как на flex позиционировать элементы по такому шаблону без дополнительных оберток?

Answer 1

Раз условия задачи требуют flex, а не grid, то воспроизвел картинку при помощи отрицательного отступа ¯\_ (ツ)_/¯

.container {
  --rowHeigt:15vw;
  --colWidth:30vw;
  --gap:1vw; 
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap)
}
.item:nth-child(1), 
.item:nth-child(2)  {
 width: calc(var(--colWidth) * 2);
 height: var(--rowHeigt);
}
.item:nth-child(3) {
  width: var(--colWidth);
  margin-top: calc(0px - var(--rowHeigt) - var(--gap));
}

.item {
  background-color: #eee;
  padding:1em;
  box-sizing: border-box;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

БЛОГ НА HUSL

Как позиционировать элементы на flex по такому шаблону?

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