css样式排列，最后一行多个元素排版问题

  <div class="flex-wrap">
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">21</div>
    <div class="flex-item">22</div>
    <div class="flex-item">23</div>
    <div class="flex-item">31</div>
    <div class="flex-item">32</div>
  </div>

方法1：justify-content: space-around;

.flex-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}

.flex-wrap:after{
  content: '';
  width: 400px;  /*子元素的宽度*/
  border:1px solid transparent;
}

.flex-item{
  width: 400px;
  height: 50px;
  border: 1px solid #EE0000; 
}

方法2：display:grid

.flex-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.flex-item{
  width: 100%;
  height: 50px;
  border: 1px solid #EE0000; 
}