上图

缩小后

主要用了 flex-basis flex-grow flex-shrink flex的三个属性 有兴趣的可以看看
深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解

 .bg{
      background-color: aquamarine;
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .box1{
      background-color: azure;
      height: 200px;
      /* 11   就是n   注意margin 右 5px   所以就是（n-1）*5   这里n=11  所以计算出来就是50     */
      margin: 0 5px 5px 0;
      flex: 0 0 calc((100% - 50px)/11); 
    }
    .box1:nth-child(11n) {
          margin-right: 0;
      }