重庆网站建设网络推广设计公司网站设计

背景：遇到在一个容器里，采用弹性盒布局的时候，如果元素个数改变，元素的排列会错乱。
解决方式
方式一：之前遇到的时候，是采用计算元素个数的方式，采用透明元素补齐的方式（比如一个有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-tagtype="info"closable:disable-transitions="false"@close="handleClose(tag)">{{ tag }}</el-tag></el-col></el-row>

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