css flex布局换行后如何水平居中

Question

css flex布局换行后如何水平居中
目前的效果是换行了前面一行后面会空出一部分，请问前端大佬该如何处理？网上找的父布局加上justify-content: space-between;然后补上空白的子元素，可是有如下问题存在：
1、子元素数量不是固定的。
2、因为需要做到响应式，屏幕大小不同又会造成每行数量也不同啊。

效果是下图这种，每个子元素大小是一样的，有间距，根据屏幕宽度进行响应式改变每行数量，比如初始是一行4个，缩小屏幕就变成3个。初始一行数量可能3个、也可能4个，也就是动态生成的

Answer 1

贴图（比如你现在是什么效果，你想要做成什么效果，贴2张图）
可以的话 发下demo代码

Answer 2

2020年3月9日更新

题主更新了下问题，其实不用flex也可以自动换行居左啊，一行排列不下也会自动换行的，
如果说最后一行居左，前边的都是散列，那么我写了一个小demo，
但是也不知道是否是符合你的想法。因为感觉还是没有表达清楚问题，算了我直接贴图吧。

如果说首行不需要散列布局的话，可以把容器的flex部分都注释掉。

以下是原回答

---

反正我是没有遇到你说的问题，看你的秒数应该是因为子元素添加了margin-right的缘故，
所以我有写了个demo，你将就看看是不是和你的现象差不多？

这种情况给元素添加 margin-left:30px 同样添加左侧外边距就可以，
但是可能会和你所需求的稍微有点不一样，
比如：
因为第一个元素的之前也会有 margin-left 就不能左对齐下方元素，
不过倒是可以考虑父级容器增加负值margin来达到左对齐下方元素。

如果说不要求间距相同的话，可能考虑 justify-content:space-around? (但是这样的话，我觉得还不如给子元素添加 margin-left)