flex布局之 flex-wrap:wrap 自动换行属性，导致最后一行无法垂直对齐，搬砖解。记录！！_flex-wrap: wrap;

首先功能是布局自动换行自动对齐。想要达到的效果是

或者是这样的：

                              

                                                                 或者说是这样的：

 但是实际上得到的却是：

 

                            

解决方法：

         <div class="menu">
          <div
            class="menu-item"          
            v-for="(item, index) in item.menuList"
            :key="index"
          >
            <div class="icon"></div>
            <div class="m-i-name">
              {{ item.name }}
            </div>
          </div>
         </div>
 

 
 .menu {
        
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
 
        .menu-item {
          display: inline-block;
          flex: 1;
        }
 
          
 
         /* 
            ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓解决方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
         */
 
        /* 因为咱们是每行展示3个所以取3n, 下面的3n-1 ，3n-2  对应的为最后一行的div数量。
            如果每行展示的是4个就4n-1，4n-2....    calc(100/每行的数量)
         */
 
        /* 如果最后一行是2个元素 */
        .menu-item:last-child:nth-child(3n - 1) {
          margin-right: calc(33% + 3% / 3);
        }
        /* 如果最后一行是1个元素 */
        .menu-item:last-child:nth-child(3n - 2) {
          margin-right: calc(66% + 6% / 3);
        }
      }