父盒子flex为1，父盒子下直接有五个子盒子，用flex布局实现第一行两个子盒子，第二行三个子盒子

可以这样实现：

HTML代码：

<div class="parent">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

CSS代码：

.parent {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.box1,
.box2 {
  flex: 1;
  height: 100px;
  background-color: red;
}

.box3,
.box4,
.box5 {
  flex: 1;
  height: 100px;
  background-color: green;
}

.box1,
.box2,
.box3 {
  margin-right: 10px;
}

.box4,
.box5 {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .parent {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .box1,
  .box2,
  .box3,
  .box4,
  .box5 {
    flex-basis: calc(50% - 5px);
    margin: 0 5px 10px 0;
  }
  
  .box2,
  .box5 {
    margin-right: 0;
  }
}

这样，父盒子使用了 flex 布局，并且设为了 flex: 1，意味着它会占据整个可用空间。同时，五个子盒子分别使用了 flex: 1，表示它们使用 flex 布局，并且占据了相等的宽度。为了实现第一行两个子盒子，第二行三个子盒子的效果，我们通过设置 margin 和 flex-basis 来控制它们的宽度和间隔。

此外，为了在移动端上展示更好的效果，我们使用了媒体查询。当屏幕宽度小于等于 768px 时，我们将父盒子的 flex-direction 设为 row，同时使用 flex-wrap: wrap 让子盒子自动换行。同时，我们使用 calc 函数和 margin 属性来计算子盒子的宽度和间隔，以便在不同的屏幕大小下都可以展示出良好的效果。