flex布局最后一行左对齐的格式

写html页面flex布局常会出现最后一行,由于个数不够设置justify-content:space-between,

显示这种格式


参考了网上的写法,主要的根据是调整最后一个盒子的右外边距

html+js


首先从获取到的元素中,判断最后一行有几个,我设置的是一行5个,我们可以知道只有在余数为2,3,4这几种情况下才会出现上述格式, 所以加了判断条件,避免在出现余数为0的时候还加右边距,num>=2的条件可以不加

给最后一个盒子设置右边距,我们可以知道 右边距=不足的盒子数*(盒子的宽度+两个盒子间的间距)

我们可以画个示意图 


    就得到了公式(100%-19%)/4 ,我的一个盒子宽为19%,,

最后右边距=(100%-19%)/4*(5-num)

即 


实现效果


不需改动代码,展示其他也一样


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容