[wechat applet -- solve the alignment problem of the last line of display:flex. (discontinuous arrangement will be divided into two sides)]

Wechat applet – solve display:flex Last line alignment problem .( The discontinuous arrangement will be divided into two sides )

Before the change

 <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; 
}

After modification

/*  Solve the problem that the last row is arranged separately  */
.addr-box:after {
    
    content: "";
    width: 30%;// And the width time above 
}