【微信小程序--解决display:flex最后一行对齐问题。(不连续排列会分到两边)】

微信小程序–解决display:flex最后一行对齐问题。(不连续排列会分到两边)

修改前

 <view class="addr-box">
    <view wx:for="{
     {socketTypeData.val}}" wx:key="index" class="addr-item {
     {index==socketTypeData.itemIndex?'selectedItem':''}}" data-dialogid="{
     {index}}" catchtap="getValueTapSocketTypeData">{
   {item}}</view>
 </view>

.addr-box {
    
    height: auto;
    box-sizing: border-box;
    padding: 16rpx; 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.addr-item {
    
    width: 30%;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    background: #F4F6F5;
    border: 1px solid #F4F6F5;
    opacity: 1;
    border-radius: 32rpx;

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #151521;
    opacity: 1; 
    box-sizing: border-box;
    margin-bottom: 24rpx; 
}

修改后

/* 解决最后一排分开排列 */
.addr-box:after {
    
    content: "";
    width: 30%;//和上面的宽度时间
}