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;
}
flex布局两端对齐space-between,解决最后一行不对齐_第1张图片

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


flex布局两端对齐space-between,解决最后一行不对齐_第2张图片

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

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

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

&:after { 
    content: ""; 
    flex: auto; 
} 
flex布局两端对齐space-between,解决最后一行不对齐_第3张图片
flex:auto.png

你可能感兴趣的:(flex布局两端对齐space-between,解决最后一行不对齐)