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;
}
注意
- 如果正常的项目有设置padding left或者right的话,那么占位符也要设置相对应的padding left和right值,这样才能均分宽度。
- 容器的grid 只设置横向的就可以,总想的可以给项目设置margin-bottom值,同时记得給占位符清空改margin-bottom值。