css flex布局多行两端对齐问题处理

在css的flex布局中，单行可用justify-content: spacebetween来两边对齐。但是如果是多行，添加flex-wrap: wrap属性后，就会是以下样式：

但如果设置 justify-content: flex-start，则无法两端对齐。

在网上搜了下，发现一般就两种解决办法：

1. 通过程序控制行数，满行的设置space-between.不满行的设置flex-start
2. 通过伪类before或after添加不可见的item，补齐最后一行。

然而这两种方法都只适合固定列数的换行，对于响应式就无能为力了，而且实现也比较复杂。

最后通过flex-start配合gap来解决这个问题。 假设我们的子项的宽度为285px。那么我们可以根据实际的列数计算出gap的宽度。

.container {
    @media (min-width: 570px) {
        gap: calc(100% - 285px - 285px);
    }
    @media (min-width: 855px) {
        gap: calc((100% - 285px - 285px - 285px) / 2);
    }
    @media (min-width: 1140px) {
        gap: calc((100% - 285px - 285px - 285px - 285px) / 3);
    }
    @media (min-width: 1425px) {
        gap: calc((100% - 285px - 285px - 285px - 285px - 285px) / 4);
    }
    @media (min-width: 1710px) {
        gap: calc((100% - 285px - 285px - 285px - 285px - 285px - 285px) / 5);
    }
    @media (min-width: 1995px) {
        gap: calc((100% - 285px - 285px - 285px - 285px - 285px - 285px - 285px) / 6);
    }
}

但是gap有些老旧的浏览器不支持，如果要支持它们，可以把gap改成margin。比如gap: 24px：

.container  {
  margin: -24px 0px 0px -24px;
}

.item {
  margin: 24px 0px 0px 24px;
}