flex最后一行左对齐

根据个数最后一个元素动态margin

ul {
    display: flex;
    justify-content: space-between;   /* 两端对齐 */
    flex-wrap: wrap;
}
li{
    width: 24%; 
}

ul li:last-child:nth-child(4n - 1){ /**最后一行，要么3个元素，要么7个元素  (最后一行还剩1个空间)**/  
    margin-right: calc(24% * 1 + 4%/3*1 );    /* 24%:列的宽  1:还剩1空间     4%:间隙宽100%-4列*24%=4%;  */
}
ul li:last-child:nth-child(4n - 2){ /**最后一行，要么2个元素，要么6个元素  (最后一行还剩1个空间) */
    margin-right: calc(24% * 2 + 4%/3*2 );   /* 24%:列的宽  2:还剩2列空间    4%:间隙总宽 / 3：间隙个数（一般总列数减一）  2：还剩2列空间间隙  */
}

列2

:root {
    --listbox:24%;          /*子元素宽度*/
    --n:4;                  /*列数*/ 
    --gaps:calc(100% - var(--listbox) * var(--n) ); /*总间隙宽*/
    --ga:calc(var(--gaps) / 3);                     /* 3间隙数*/
}
.case-category ul li:last-child:nth-child(4n - 1){ /**最后一行，要么3个元素，要么7个元素* (最后一行还剩1个空间) */
    margin-right: calc(var(--listbox) * 1 + var(--ga)*1);
}
.case-category ul li:last-child:nth-child(4n - 2){ /**最后一行，要么2个元素，要么6个元素* (最后一行还剩2个空间) */
    margin-right:calc(var(--listbox) * 2 + var(--ga)*2 );
}

例如：

• .list:last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素……
• .list:last-child:nth-child(4n - 2)说明最后一行，要么2个元素，要么6个元素……

.container {
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3个元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}