建站资讯

flex布局解决最后一排数量不够自动向两端排列问

作者:admin 发布时间:2020-07-31
flex布局解决最后一排数量不够自动向两端排列问题 0 Comments 44 Views 1 Times

flex布局,当最后一行数量不够时,会出现下面布局

那么要实现下面如下效果怎么操作呢:

方法一:仅适用三列布局
 div > div v-for="item in orderGoodsList">列表 /div> /div>
.item-flex{ display: flex; flex-wrap: wrap; justify-content:space-between; text-align: justify; } !--加上after伪类,解决最后一排数量不够两端分布的情况--> .item-flex:after{ content: ''; width: 30%; } .item-list{ width:30%; }
方法二:适用四列、五列 更多情况
 div > div v-for="item in len">列表 /div> div v-for="item in row-(orderGoodsList.length)%row" v-if="(orderGoodsList.length)%row > 0"> /div> /div>
.item-flex{ display: flex; flex-wrap: wrap; justify-content:space-between; justify-items: center; text-align: justify;}.list{ content: ''; width: 240px; border:1px solid transparent; padding: 5px; overflow: hidden;}.item-list{ width:240px; border:1px solid #ff6600; margin-bottom: 10px; padding: 10px 5px; display: flex; justify-content: center;}

这里的 row 即是每列元素的个数,4列,5列。。。更改这个值即可

版权声明:除特别注明外,本站所有文章均为田珊珊个人网站原创

转载请注明:出处来自田珊珊个人网站 flex布局解决最后一排数量不够自动向两端排列问题


收缩