如何使用flexbox制作具有相同填充的完美列

Question

我想使用flexbox复制具有相同填充的列，它们需要如下图所示：

较浅的灰色框是不可见的，框之间的填充应该相等，但是侧框在没有接触任何框的一侧应该没有填充。之前，我会做类似的事情：

HTML

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

.box{
    width: 32%;
    margin-bottom: 2%;
}

.box:nth-of-type(3n - 1){
    margin-left: 2%;
    margin-right: 2%;
}

然后为了使它们响应，我会添加一个断点并删除左右边距，例如将宽度设置为49％，然后向nth-of-type（2n）添加2％的margin-left

如何使用flexbox复制此内容？提前谢谢！