Flex布局解决最后一行左对齐

使用flex布局，将多个元素以三个为一行，往下排列。

.logo-field {
    width: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .__logo-item {
        width: 200px;
        height: 150px;
        margin-top: 15px;
    }
}

 当列表元素数量不满足3n的时候，最后一行会根据justify-content:center进行剩余空间分配，导致元素不会左对齐

.logo-field {
    width: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .__logo-item {
        width: 200px;
        height: 150px;
        margin-top: 15px;
        &:not(:nth-child(3n)) {
            margin-right: calc(50px / 2);
        }
    }
}

通过:not(:nth-child(3n))筛选出不是第3n的元素，然后用margin-right模拟间隙

这里需要进行calc()算出每个间隙大小，通过父盒子宽度减去每行子元素总宽度再除以两个间隙（因为这里是每行三个元素）得到每个间隙大小

 

:not()

用来筛选不符合括号内参数的元素