「CSS」每行自适应5个卡片，最后一行卡片布局不乱

之前在用弹性盒子做自适应布局时，发现：如果有7个卡片，第一行放5个，第二行剩余的2个卡片会分散在第二行两端，非常不美观！

这里提供了一种实现思路，最后一行不满5个卡片时，让最后一个卡片占满右边空间，效果图如下：

 实现代码：

// 最外层父元素
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    // 卡片
    > .card {
        height: 150px;
        flex: 0 0 18%; //每一个盒子占18%
        min-width: 18%;
        margin-right: calc(9.99% / 4);
        margin-bottom: calc(9.99% / 4);

        // 每行最后一个卡片
        &:nth-child(5n) {
          margin-right: 0;
        }

        // 最后一个卡片
        &:last-child {
          margin-right: auto;
        }
    }
}