Построение нестандартной сетки на флексах

#css #flexbox

Задача состоит в том, чтобы построить блоки как на картинке, при условии, что блоки
в дополнительные контейнеры оборачивать нельзя – адаптив подразумевает перемещение
блоков относительно друг друга… Вопрос, возможно ли это сделать на флексах без каких-то
дополнительных хитростей?
    

Ответы

Ответ 1

У меня не получилось сделать это на чистых флексах без хака с отрицательным маргином,
но получилось сделать с ним и резиново. Может быть вам поможет: 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);
}

  
1
  
2
  
3
  
4