flex布局——既平分又可换行布局

方法一：

如上图，卡片列表式布局；每行有四个box;

<div class="s200train_container">
    <Groupcard class="card"></Groupcard>
    <Groupcard class="card"></Groupcard>
    <Groupcard class="card"></Groupcard>
    <Groupcard class="card"></Groupcard>
    <Groupcard class="card"></Groupcard>
    <Groupcard class="card"></Groupcard>
    <Groupcard class="card"></Groupcard>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
 </div>

.s200train_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  .card {
    width: 24%;  
  }
  .empty {
    visibility: hidden;
    width: 24%;
    height: 0px;
    margin-right: 8px;
  }
}

大的container布局方式flex,

并且可以换行wrap

水平平均分布space-between;

每个卡片占24%的大小；（100%平均分四份，考虑有外边距等情况适度调整）

每行四个卡片。所以多写四个empty的盒子，设置隐藏，高度为0；

方法二：

使用el-row , el-col