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个可以以此类推,举一反三
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。