解决flex最后一行不对齐问题

1.列数固定

可以去掉两端对齐的方式，用gap控制间隙

 <style>
        .container{
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-between; */
            gap: calc(16%/3) ;
        }
        .list{
            width: 21%;
            height: 100px;
            margin-top: 10px;
            background-color: skyblue;
            outline: 2px solid red;
            
        }
        /* .list:not(:nth-child(4n)){
            margin-right: calc(16%/3);
        } */
   </style>
 <div class="container">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
    </div>

2.列数不固定

  <style>
        .container{
            width: 480px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            background-color: yellowgreen;
        }
        .list:nth-child(odd){
            width: 100px;
           
        }
        .list:nth-child(even){
            width: 80px;
           
        }
        .list{
            height: 100px;
            margin: 10px;
            outline: 1px solid black;
            background-color: antiquewhite;
        }
        /* 法一 */
        .list:last-child{
            margin-right: auto;
        }
        /* 法二 */
        /* .container::after{
            content: "";
            flex: auto;
        } */
    </style>

 <div class="container">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
        
        <div class="list" style="width:46px"></div>
        <div class="list" style="width:46px"></div>
        <div class="list" style="width:76px"></div>
        <div class="list" style="width:86px"></div>
        <div class="list" style="width:46px"></div>
    </div>