使用flex对页面进行平均分布局

页面效果

代码：

<div class="container">
  <div class="row">
    <div class="child" style="background-color: lightblue;">1</div>
    <div class="child" style="background-color: lightgreen;">2</div>
    <div class="child" style="background-color: lightsalmon;">3</div>
    <div class="child" style="background-color: pink;">4</div>    
  </div>
  <div class="row">
    <div class="child1" style="background-color: lightblue;">1</div>
    <div class="child" style="background-color: lightgreen;">2</div>
    <div class="child" style="background-color: lightsalmon;">3</div>  
  </div>
  <div class="row"></div>
</div>

<style>
.container {
  height: calc(100vh - 70px);
  padding: 10px 10px 0 10px;
  display: flex;
  flex-direction: column;
}
.row {
  flex: 1;
  background-color: lightblue;
  border: 1px solid #ccc;
  display: flex;
}
.child{
  flex:1;
}
.child1{
  flex:2;
}
</style>