小编Ver*_*rix的帖子

这是我开始的地方: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;
}