Flex布局使最后一行居左

设置容器 justify-content: space-between; 效果如下：

 如何设置最后一行居左，分为两种情况，容器宽度固定，容器宽度不固定；

1. 容器宽度固定

容器宽度固定时，需要保持每个元素之间的间隔相同，并且让剩余空间撑开。如果间隔不相同时，会造成最后一行和其它行位置错位。

保持间隔相同的两种方法：

1. 设置合适的容器宽度和margin，使元素间的间隔宽度相等

2. 设置合适的容器宽度和row-gap和column-gap，保持每个元素之间的间隔和设置的gap宽度相等

间隔不相等：

 间隔相等：

方法1实现间隔相等

方法2实现间隔相等

然后将剩余空间撑开：

第一种方式，为容器的after设置flex:1，使其撑开剩余的空间

 第二种方式，为最后一个子元素设置margin-right: auto；撑开剩余的空间

 第三种方式：直接设置容器的  justify-content: flex-start;

2. 容器宽度不固定

宽度不固定时，使用上面的任何方法，都会造成间隔变化，导致元素错位。

可以放弃flex，使用grid布局；