解决flex布局space-between最后一行左对齐的方法

最近在做页面的时候遇到了一个情况,具体是这样的。

给最外面的大盒子设置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最后一行左对齐的方法了
如果这篇文章对你有帮助,或者在进行中遇到其他问题,欢迎评论区留言出来。
我们一起探讨~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容