CSS 中 flex 布局最后一行左对齐

CSS 中 flex 布局最后一行左对齐

使用 flex 布局的时候 同时使用属性 justify-content: sapce-between 会出现最后一行布局错乱

这种情况只适用于使用justify-content:space-between

<div class="detail-list">
	<div class="list-box">
	    <image class="list-image" src="{{listItem.img}}"/>
	    <span class="list-text">{{listItem.songer}}span>
	div>
div>

.classify-detail .detail-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.detail-list .list-box {
    width: 33.33%;
    text-align: center;
    padding: 0 10rpx;
    margin-top: 10rpx; 
}

使用伪元素 ::after 可以解决

.classify-detail .detail-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.detail-list .list-box {
    width: 33.33%;
    text-align: center;
    padding: 0 10rpx;
    margin-top: 10rpx; 
}
.detail-list::after {
    content: "";
    width: 33%;
}