用flex布局时用到justify-content:space-between属性让弹性容器内的元素向两端对齐,并且平摊对应的宽度！

    <div class="box">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div>

     .box {
           width: 1000px;
           height: 250px;
           background-color: green;
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           align-items: center;
       }

       .box div {
           width: 195px;
           height: 100px;
           background-color: red;
       }

上面代码实现的效果

但使用justify-content:space-between属性之后，如果不是对应的整数的话，就会有对应的在中间空缺的状态，如图中，一类排五个，但是一个只有七个，第一列排满，剩下两个应该是回头下来从左边排起，但是剩下的两个占满一列并且想两边对齐了！！！

解决方案：写占位来填充：

     <div class="content">
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        <div  class="box"></div>
        
        <!-- 一行需要几个元素就写几个下面的标签 -->
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
        <div class="box" style="visibility: hidden;height: 0;margin: 0;"></div>
    </div>

     .content{
           width: 1000px;
           height: 250px;
           background-color: green;
           display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           align-items: center;
       }

       .content .box  {
           width: 195px;
           height: 100px;
           background-color: red;
       }

最终效果：

---

---

vant组件内嵌样式调整

最近项目遇到使用vant的Uploader图片上传组件时，想根据屏幕适配每一排排三个，使用弹性布局！

出现了两边空缺状态！所以上面组件中的占位来填充用起来很麻烦，所以想到使用平摊布局来写！nth-of-type

.upImg_upload{
      width: 100%;
      .van-uploader__wrapper{
        width: 100%;
        // justify-content: space-between;
        .van-uploader__preview{
          margin: 0 5% 5vw 0;
          width: 30%;
          display: flex;
          .van-uploader__preview-image{
            width: 28vw;
            height: 28vw;
            border-radius: 2vw;
          }
          .van-uploader__preview-delete{
            top: 22vw;
            right: 0;
            width: 100%;
            height: 6.3vw;
            background-color: #D9001B;
            border-radius: 0 0 2vw 2vw;
            opacity: 0.8;
            .van-uploader__preview-delete-icon{
              background: url("../../assets/clocking/deleted.png");
              background-size: 100% 100%;
              font-size: 0;
              width: 24.258vw;
              height: 8vw;
              top: -3px;
              right: 3px;
            }
          }
        }
         .van-uploader__preview:nth-of-type(3n){
           margin: 0 0 5vw 0;
         }
        .van-uploader__upload{
          background: url("../../assets/clocking/uo_load_img.png");
          background-size: 100% 100%;
          margin: 0 0 5vw 0;
          width: 30%;
          height: 28vw;
        }
      }
    }