写html页面flex布局常会出现最后一行,由于个数不够设置justify-content:space-between,
显示这种格式
参考了网上的写法,主要的根据是调整最后一个盒子的右外边距
html+js
首先从获取到的元素中,判断最后一行有几个,我设置的是一行5个,我们可以知道只有在余数为2,3,4这几种情况下才会出现上述格式, 所以加了判断条件,避免在出现余数为0的时候还加右边距,num>=2的条件可以不加
给最后一个盒子设置右边距,我们可以知道 右边距=不足的盒子数*(盒子的宽度+两个盒子间的间距)
我们可以画个示意图
就得到了公式(100%-19%)/4 ,我的一个盒子宽为19%,,
最后右边距=(100%-19%)/4*(5-num)
即
实现效果
不需改动代码,展示其他也一样