flex:1最后一行或者只有一行时不想占满整行

问题

在设置flex1的时候，如果内容只有一行或者多行的最后一行的时候，往往最后一行会占满整行，导致项目比其他行宽，比如：

解决方法

这时候我们可以使用占位符方法，就是预设几个空的项目，让他们也参与到占位的作用，这样项目就不会因为grow的原因过分变宽。

<div class="noHeight" v-for="(item, index) in noHeightList" :key="index"></div>

data：
noHeightList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],

css：
.noHeight {
   height: 0 !important;
   min-height: 0 !important;
   padding: 0;
   margin: 0;
   margin-bottom: 0;
}

注意

1. 如果正常的项目有设置padding left或者right的话，那么占位符也要设置相对应的padding left和right值，这样才能均分宽度。
2. 容器的grid 只设置横向的就可以，总想的可以给项目设置margin-bottom值，同时记得給占位符清空改margin-bottom值。