flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题

共计 377 个字符，预计需要花费 1 分钟才能阅读完成。

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 个可以以此类推，举一反三
更多详细知识介绍请访问我的个人主页