最近在做页面的时候遇到了一个情况,具体是这样的。
给最外面的大盒子设置justify-content:space-between;这个样式的时候,如果盒子的个数是1个,
3的倍数,或者是3的倍数+1的时候,是正常的。但是当盒子的个不符合刚才所列举的个数。就会
出现最后一行中间是空的。如下图:
1670408593847.png
我试了试网上大家说的最多的一种方法
.main:after {
content: "";
flex: auto;
}
虽然是靠左了没错,但是跟他前一个div挨着,且每个模块都是这样
再继续找~~~
这是原创作者的链接,分享给大家:
jb51.net)](https://www.jb51.net/css/736179.html
只需两行代码即可实现
.main div:after { // main是我最外层大盒子的名称
content: "";
width: 6.62rem; // 这个宽度为里面div的宽度
}
以上就是解决flex布局space-between最后一行左对齐的方法了
如果这篇文章对你有帮助,或者在进行中遇到其他问题,欢迎评论区留言出来。
我们一起探讨~