vue elementui layout布局组件实现规则的弹性布局

背景：遇到在一个容器里，采用弹性盒布局的时候，如果元素个数改变，元素的排列会错乱。
解决方式
方式一：之前遇到的时候，是采用计算元素个数的方式，采用透明元素补齐的方式（比如一个有5个元素，上一行3个正常布局，剩下的2个在下一行是错乱的布局，少一个元素，凑成3个 ，改用透明的方式，就能规则排列）。
方式二：看了同事的解决方法
项目采用的是vue结合elementui的方式，利用layout布局组件完成，这个组件可以有响应式：参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

我项目里的是

        <el-row>
                <el-col
                  :key="tag"
                  v-for="tag in dynamicTags"
                  class="tagcol"
                  :xs="24"
                  :sm="12"
                  :md="8"
                  :lg="8"
                  :xl="6">
                  <el-tag
                    type="info"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >{{ tag }}</el-tag>
                </el-col>
              </el-row>

表示：该容器里，元素每一列按照屏幕大小改变而占据的宽度不同。意味着，最小的时候，列占完，即只展示一个元素，最大的时候，占用6份，即显示4个元素（一行为24份）。