Как расположить блоки с помощью flexbox?

03 декабря 2020, 12:50

у меня есть макет (Фото предоставляю ниже), шапку сверстал самостоятельно, осталось сделать вторую часть макета (главную часть), подскажите пожалуйста, как правильно расположить блоки с помощью flex-box? Блоки на скриншоте обвел в красную рамку.

Answer 1

flex-direction: column; + flex-wrap:wrap; + max-height такой вот хак

.items { 
  display: flex; 
  width: 880px; 
  flex-direction: column; 
  flex-wrap: wrap; 
  max-height: 400px; 
} 
 
.item { 
  width: 200px; 
  margin: 10px; 
} 
 
.item:nth-of-type(1) { 
  height: 400px; 
  background: #ccc; 
} 
 
.item:nth-of-type(2), 
.item:nth-of-type(3), 
.item:nth-of-type(4), 
.item:nth-of-type(5), 
.item:nth-of-type(6), 
.item:nth-of-type(7) { 
  height: 180px; 
  background: #ccc 
}

<div class="items"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>