如何使用flex-box容器在多行上保留间距模板

Question

这是我开始的地方:http://jsfiddle.net/Vercingetorix333/7b2L25a5/2/

如您所见,我在容器两端的间距(弹性尺寸:10)远大于内容之间的间距(弹性尺寸:2.5).在用户减小html窗口大小的那一刻,元素最终会换行到第二行(按预期).

然而,我想要做的是设置第一个窗口调整断点/响应因子的大小,这样当内容确实移动到第二行(可能@media....在css中使用？)时,它会同时使用两个最右边的内容div.

然后我希望容器中的每一行看起来像这样:

大缓冲区 - 内容 - 小缓冲区 - 内容 - 大缓冲区

我可以纯粹用css做这个吗？或者我需要一些JavaScript？

编辑:从小提琴添加我的代码(为了后人的缘故).

HTML

<div class="outer_container">

    <div class="outer_buffer"></div>

    <div class="content">Some Content</div>
    <div class="inner_buffer"></div>
    <div class="content">Some Content</div>
    <div class="inner_buffer"></div>
    <div class="content">Some Content</div>
    <div class="inner_buffer"></div>
    <div class="content">Some Content</div>

    <div class="outer_buffer"></div>

</div>

CSS

.outer_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.outer_buffer{
    flex-grow: 10;
}
.inner_buffer{
    flex-grow: 2.5;
}
.content{
    width: 50px;
    border: solid 1px red;
}

Answer 1

编辑：以前这里是我的示例解决方案，基于对项目计数及其行为的限制的错误假设。该解决方案的 jsfiddle 示例是http://jsfiddle.net/7b2L25a5/32/，对于 JS 版本 - http://jsfiddle.net/7b2L25a5/38/

编辑解决方案

可以通过添加一个额外的包装器（而不是几个“缓冲区”div）并根据适合一行的项目数更改内部包装器的flex-basis和值来实现所需的行为，因此项目之间的空间以常数拉伸flex-grow与外部“缓冲区”的比例（使用外部容器的伪元素）：

body { margin: 10px 0; }

.outer_container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
}

.outer_container::before,
.outer_container::after {
    content: '';
    flex: 4 0 0;
}

.middle_container {    
    display: flex;
    /* if there are 2 items on each line,
       we need to stretch 1 space */
    flex: 1 0 104px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.content{
    width: 50px;
    border: solid 1px red;
}

@media screen and (min-width: 260px) {
    /* if there are 4 items on each line,
       we need to stretch 3 spaces */
    .middle_container { flex: 3 0 208px; }
}

<div class="outer_container">
    <div class="middle_container">
        <div class="content">Some Content</div>
        <div class="content">Some Content</div>
        <div class="content">Some Content</div>
        <div class="content">Some Content</div>
    </div>
</div>

所需媒体查询的数量取决于布局变化的数量。对于两种变体（每行 2 或 4 个项目），仅需要一个 MQ。