Модульная сетка на flex

[viliksar]

Используя flex хочу построить сетку с модулями (скрин)

Скрытый текст

пробовал изменять расположения вдоль главной и поперечной оси, не смог добиться расположения как на скрине

код здесь - https://codepen.io/viliksar/pen/dKvZgV?editors=1100

Edited June 11, 2018 by viliksar

[AlexZaw]

Размеры сами подставите

<div class="container">
   <div class="column header"></div>
   <div class="row">
      <div class="column column1">1</div>
      <div class="wrap">
        <div class="column column2">2</div>
        <div class="column column3">3</div>
        <div class="column column4">4</div>
      </div>
   </div>
  <div class="column footer"></div>
</div>

.container {
  width: 600px;
  min-height: 230;
}

.column {
  height: 90px;
  padding: 20px;
  border: 1px solid black;
  box-sizing: border-box;
}
.column2{
  width: 100%;
}
.column3, .column4{
  width: 50%;
}
.row {
  display: flex;
  justify-content: space-between;
}
.wrap{
  display: flex;
  flex-wrap:wrap;
}

.header {
  padding: 20px;
  height: 40px;
  margin-bottom: 5px;
}

.footer {
  padding: 5px;
  height: 20px;
  margin-top: 5px;
}