css - Flex space-between - 均匀分布在多行

Question

Codepen 示例:here

是否可以使用 justify-content: space-between 在多行上均匀地重新排列 flex-container 中的元素？

正如您在 codepen ( link ) 中看到的那样，大多数元素都在第一行，只有那些不适合该行的元素才会显示在第二行(中间有空格)。

!!请注意，我只将包含所有过滤器的 div 设置为在 codepen 中显示的宽度。它将是 bootstrap col-12 的 80% 宽度。所以大体上它们适合一行，在 md 上我想确保第二行不只有 1 个元素，而是整个过滤器组居中并均匀分布在 2 行上(似乎包含图像)。

我想让它在顶行有 4 或 5 个元素，在底行有 4 或 5 个元素。
我希望图像能解释更多:

感谢您的帮助，刚接触 flex!

Answer 1

感谢@Cheshire 在评论中的建议，我找到了一种或多或少让它发挥作用的方法。

如果你添加 margin-right 和 margin-left 到元素并设置 justify-content: center 你可以实现我的寻找。
唯一的缺点是你必须为元素设置固定的边距(左右)，所以你不能再使用 space-between 了。但就我而言，它看起来仍然更好。