北京门户网站制作查询网址域名ip地址

flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况

如图所示排布情况

这时，我们可以下面after伪类，解决最后一排数量不够两端分布的情况

.tem-flex{display: flex;flex-wrap: wrap;justify-content:space-between;text-align: justify;}<!--加上after伪类，解决最后一排数量不够两端分布的情况-->.tem-flex:after{content: '';width: 30%;border:1px solid transparent;}.tem-list{width:30%;border:1px solid #ff6600;margin-bottom: 10px;}

最终效果，完美解决两端对齐布局混乱的情况

在这里插入图片描述

当然，如果布局每列有4个，5个多个可以一次类推，举一反三