Css 弹性间距-均匀分布在多条直线上

代码笔示例：

是否可以使用

调整内容：多行上的
间距均匀地重新设置flex容器中项目的范围？

正如您在codepen（）中所看到的，大多数项目都在第一行，只有不适合该行的项目才会显示在第二行（中间有空格）

！！请注意，我只将包含所有过滤器的div设置为一个在codepen中显示的设置宽度。它将是引导col-12的80%宽度。所以在大屏幕上，它们可以放在一行上，在md上，我想确保第二行上不只有一个项目，而是整个过滤器组集中并均匀分布在两行上（似乎包括图像）

我想让它在最上面一行有4或5个项目，在最下面一行有4或5个项目。

我希望这张图片能解释更多：

谢谢你的帮助，对flex来说是个新手
 多亏了@Cheshire在评论中的建议，我或多或少找到了一个让它发挥作用的方法

如果您在项目中添加
margin right
和
margin left
，并设置
justify content:center
，您就可以实现我想要的功能。

唯一的缺点是必须为项目设置固定的边距（左侧和右侧），因此不能再使用
之间的空格。但在我的情况下，它仍然看起来更好。
只需在
.filters中添加一些边距。filter
使其
边距：5px10px
我应该清楚地表明没有设置宽度（就像在我的codepen中一样，我在那里设置宽度是为了复制显示在两行上的项目）。在宽大的桌面上，所有项目都可以放在一行上，而不是当你缩小屏幕时。我将更新我的问题，使之更清楚。@Temaniaf如果这样做，下面的一行将不会在中心对齐。更改
.filters.filter
并在左右两侧留出一些空白，同时，将justify内容从
.filters
更改为居中。@柴郡感谢您的建议，但对我来说似乎没有太大变化（在我的chrome代码笔中）。@nclsvh很高兴听到您认为您已经解决了它=）