SOURCE

<div id="demo1">
  <h4>布局1</h4>
  <div class="flex">
    <div class="flex-item flex-item-1">1</div>
    <div class="flex-item flex-item-2">2</div>
    <div class="flex-item flex-item-3">3</div>
    <div class="flex-item flex-item-4">4</div>
    <div class="flex-item flex-item-5">5</div>
  </div>
</div>
<div id="demo2">
  <h4>布局2</h4>
  <div class="flex">
    <div class="flex-item flex-item-1 left">
      <h5>left</h5>
    </div>
    <div class="flex-item flex-item-2 right">
      <div class="flex-item flex-item-1">1</div>
      <div class="flex-item flex-item-2">2</div>
      <div class="flex-item flex-item-3">3</div>
    </div>
  </div>
</div>

/* common */
body {
  margin: 0;
  padding: 0;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: nowrap;
}
.flex-item {
  flex: 1 0 auto;
}
.flex-item:nth-child(2n+1){
  background: #ddd;
}
h4 {
  border-bottom: 1px solid #aaa;
}
#demo1 {
  .flex {
    position: relative;
    flex-wrap: wrap;
  }
  .flex-item {
    height: 16vw;
  }
  .flex-item-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 32vw;
  }
  .flex-item-2,
  .flex-item-3 {
    width: 50%;
    height: 16vw;
    margin-left: 50%;
    background: rgba(200,200,0,0.3);
  }
  .flex-item-3 {
    background: rgba(200,200,0,0.5);
  }
  .flex-item-4 {
    background: rgba(200,200,0,0.5);
  }
  .flex-item-5 {
    background: rgba(200,200,0,0.3);
  }
}
#demo2 {
  .flex {
    align-items: stretch;
  }
  .left {
    flex: 1 1 30%;
    height: 200px;
    background: lightblue;
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex: 1 1 70%;
    .flex-item {
      /* width: 100%; */
    }
  }
}