2

Как правильно сверстать блок? (желательно flex)

Как правильно сверстать блок? (желательно flex)

1 ответ 1

2

Тут можно сделать двумя способами 1 способ, самый простой , фиксорованная высота + flex-direction: column + правильные размеры блоков :

.item1 .item:nth-of-type(1){
  margin:0 0 20px;
}

.item1 .item:nth-of-type(1),
.item1 .item:nth-of-type(2){
  width:200px;
  height:190px;
  background:#ccc;
}

.item1 .item:nth-of-type(3){
  width:500px;
  height:400px;
  background:#ccc;
}

.item1{
  width:730px;
  display:flex;
  flex-direction:column;
  height:400px;
  flex-wrap:wrap;
}
<div class="item1">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Второй способ , обернуть элементы по такой схеме :

.item1 {
  display: flex;
  width: 725px;
  margin: auto;
}

.item-1 {
  width: 200px;
  height: 200px;
  background: #ccc;
  margin-bottom: 10px;
}

.item-2 {
  width: 500px;
  height: 410px;
  background: #ccc;
  margin-left: 10px;
}
<div class="item1">
  <div>
    <div class="item-1"></div>
    <div class="item-1"></div>
  </div>
  <div class="item-2"></div>
</div>

Оба примера смотреть на весь экран

1
  • Спасибо большое! Commented 14 мая 2019 в 23:35

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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