flex布局自動換行並解決最后一行兩側對齊

在開發中遇到使用彈性布局需要換行的情況，解決記錄，以免忘記

<div class="bankproduce">
      <div class="bankproduce_content"></div>
      <div class="bankproduce_content"></div>
      <div class="bankproduce_content"></div>
       .......
</div>

.bankproduce{
    width: 100%;
    height: 1072px;
    display: flex;
    flex-direction: row;
    //兩側對齊
    justify-content:space-between;
    //自動換行
    flex-wrap: wrap;
    //清除上下行的中間空隙
    align-content: flex-start;
}
.bankproduce_content{
    height: 486px;
    //---
    flex: 0 0 31%;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 40px;
    background: #ff6654;
}
//解決最后一行的問題
.bankproduce:after{
    content: '';
    width: 30%;
    border:1px solid transparent;
  }