Задача состоит в том, чтобы построить блоки как на картинке, при условии, что блоки в дополнительные контейнеры оборачивать нельзя – адаптив подразумевает перемещение блоков относительно друг друга… Вопрос, возможно ли это сделать на флексах без каких-то дополнительных хитростей?
Ответ
У меня не получилось сделать это на чистых флексах без хака с отрицательным маргином, но получилось сделать с ним и резиново. Может быть вам поможет: http://codepen.io/rqrqrqrq/pen/WxxLQG, контейнер можно растягивать.
.block4 {
margin-left: calc(-25% + 5px);
}
.container {
display: flex;
flex-flow: column wrap;
justify-content: flex-end;
}
Код полностью:
.container {
outline: 2px solid #555;
height: 300px;
width: 400px;
display: flex;
flex-flow: column wrap;
justify-content: flex-end;
resize: both;
overflow: auto;
}
.block {
box-sizing: border-box;
background: #48f;
margin: 5px;
padding: 10px;
font-size: 30px;
color: #fff;
}
.block1 {
width: calc(50% - 10px);
height: calc(100% - 10px);
}
.block2 {
width: calc(50% - 10px);
height: calc(50% - 10px);
}
.block3,
.block4 {
width: calc(25% - 10px);
height: calc(50% - 10px);
}
.block4 {
margin-left: calc(-25% + 5px);
}
Комментариев нет:
Отправить комментарий