Как правильно сверстать блок? (желательно flex)
1 ответ
Тут можно сделать двумя способами 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>
Оба примера смотреть на весь экран