flex布局两端对齐space-between，解决最后一行不对

当我们在父元素设置justify-content: space-between;元素会实现两端对齐，但最后一行会如图所示，不大美观

/*父元素*/
.wrapper{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
/*子元素*/
wrapper .item{
    width:190rpx;
    height:120rpx;
    border-radius:10rpx;
    text-align: center;
    line-height:120rpx;
    border:1rpx solid #333;
    margin-bottom:20rpx;
}

而实际我们想要实现的效果是下面这样的，要怎么解决呢？

解决方法： 在父元素的after伪元素中宽度设置成与item的宽一样即可

&:after { 
    content: ""; 
    width:190rpx;
} 

另外我试了网上说的另外的方法，实现效果只是左对齐，而且中间间隔并不好控制

&:after { 
    content: ""; 
    flex: auto; 
} 

flex:auto.png