flex布局限制每行固定个数

需求：借用display：flex设置每行固定显示3个，不足3个的自动补空元素，左对齐。

• 解决方案

    <div class="flexBox">
        <div class="gpitem" v-for="(v,i) in gplist" :key="i">
            <h4>第{{i+1}}小组</h4>
            <span class="spandv">
                <img src="../images/github.png">
                <b>{{v.name}}</b>
            </span>
        </div>
        <div class="gpitem" v-for="item in (row-gplist.length%row)" v-if="gplist.length%row>0"></div>
    </div>
    
    data(){
    	return {
        	gplist:[
              {
                  name:'规划师的名字'
              },
              {
                  name:'规划师的名字'
              },
              {
                  name:'规划师的名字'
              },
              {
                  name:'规划师的名字'
              },
              {
                  name:'规划师的名字'
              }
          ],
          row:3,//每行的个数
        }
    }
    
    
    .flexBox{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 36px 128px;
      .gpitem{
          flex: 33.33%;
      }
  	}