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

Question

这里是我的起点:http://jsfiddle.net/Vercingetorix333/7b2L25a5/2/

如您所见，容器两端的间距( flex 尺寸:10)远大于内容之间的间距( flex 尺寸:2.5)。当用户减小 html 窗口的大小时，元素最终会换行到第二行(如预期的那样)。

但是我想做的是设置第一个窗口调整断点/响应因子，这样当内容移动到第二行时(可能使用 @media.... css？)它一次性获取最右边的两个内容 div。

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

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

我可以只用 css 做这个吗？或者我需要一些 javascript 吗？

编辑:从 Fiddle 添加我的代码(为了后代)。

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

你可以像这个答案那样做。我使用两组大(flex-grow 10)和小(flex-grow 2.5)缓冲区 div 作为第一个和第二个窗口调整断点，我已经系统地分配了 display: none 一次设置为一组，以便为​​每个 @media 查询断点只显示一组大小缓冲区 div。我正在使用两个容器 div 并且每个容器 div 有两个内容 div 并且在第一个窗口调整大小 @media query break-point 将右边的容器移到第二行。实际上，它会根据您想要的结果一次性获取最右边的两个内容 div。

请查看我的答案的编辑部分(下方)，通过使用 CSS 伪元素(即 :after 和 :before)以最少的 HTML 标记完成它。

结果:

At first @media query break-point the result look like this:

large buffer (10) - content - small buffer (2.5) - content - large buffer (10)
large buffer (10) - content - small buffer (2.5) - content - large buffer (10)

您需要做的就是根据 .content 大小计算 CSS @media 查询断点的 max-width 解决方案.

例如:如果将 .content 的 width 设置为 200px，则:

1st @media query break point of max-width is: 4 x 200px = 800px

2nd @media query break point of max-width is: 2 x 200px = 400px

Example: JSFiddle - DEMO

JSFiddle - DEMO

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 2.5;
}
.content {
    width: 50px;
    border: solid 1px red;
}
.lg {
    flex-grow: 10;
}
.sm {
    flex-grow: 2.5;
}
.w-buffer {
    display: block;
}
.c-buffer {
    display: none;
}
@media (max-width: 224px) {
    .wrapper {
        display: block;
    }
    .container {
        justify-content: center;
        flex-grow: 0;
    }
    .w-buffer {
        display: none;
    }
    .c-buffer {
        display: block;
    }
}
@media (max-width: 120px) {
    .wrapper {
        display: flex;
    }
    .w-buffer, .c-buffer {
        display: none;
    }
}

<div class="wrapper">
    <div class="w-buffer lg"></div>
    <div class="container">
        <div class="c-buffer lg"></div>
        <div class="content">Some Content</div>
        <div class="c-buffer sm"></div>
        <div class="content">Some Content</div>
        <div class="c-buffer lg"></div>
    </div>
    <div class="w-buffer sm"></div>
    <div class="container">
        <div class="c-buffer lg"></div>
        <div class="content">Some Content</div>
        <div class="c-buffer sm"></div>
        <div class="content">Some Content</div>
        <div class="c-buffer lg"></div>
    </div>
    <div class="w-buffer lg"></div>
</div>

您还可以使用 CSS Pseudo-elements (即 :after 和 :before)以减少缓冲区 div 的数量。

JSFiddle - DEMO

body {
    margin: 8px;
}
.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 2.5;
}
.content {
    width: 50px;
    border: solid 1px red;
}
.pseudo-buffer:before, .pseudo-buffer:after {
    content:" ";
    display: block;
}
.wrapper.pseudo-buffer:before, .wrapper.pseudo-buffer:after {
    flex-grow: 10;
}
.buffer {
    flex-grow: 2.5;
}
@media (max-width: 224px) {
    .wrapper {
        display: block;
    }
    .container {
        justify-content: center;
        flex-grow: 0;
    }
    .wrapper.pseudo-buffer:before, .wrapper.pseudo-buffer:after {
        display: none;
    }
    .container.pseudo-buffer:before, .container.pseudo-buffer:after {
        flex-grow: 10;
    }
}
@media (max-width: 120px) {
    .wrapper {
        display: flex;
    }
    .wrapper.pseudo-buffer:before, .wrapper.pseudo-buffer:after, .container.pseudo-buffer:before, .container.pseudo-buffer:after, .buffer {
        display: none;
    }
}

<div class="wrapper pseudo-buffer">
    <div class="container pseudo-buffer">
        <div class="content">Some Content</div>
        <div class="buffer"></div>
        <div class="content">Some Content</div>
    </div>
    <div class="buffer"></div>
    <div class="container pseudo-buffer">
        <div class="content">Some Content</div>
        <div class="buffer"></div>
        <div class="content">Some Content</div>
    </div>
</div>

[编辑]

您也可以在不使用任何 buffer div 的情况下执行此操作，只需根据 @media 查询断点和将宽度设置为 container我正在使用两个 @media 查询断点，因为我认为，如果每行只有一个 content div，那么 content div 应该是在 container div 内水平居中，如果您不想使用第二个 @media 查询断点，则只需将其删除并设置 min-width: 104px; 到 @media (max-width: 208px) 的 container。你可以这样做 JSFiddle DEMO

JSFiddle - DEMO

body {
    margin: 20px 0px 0px 0px;
}
.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.content {
    width: 50px;
    border: solid 1px red;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 7.5; /* Total space between 4 content divs same as 3 x 2.5 flex-grow */
}
.wrapper:before, .wrapper:after {
    content: " ";
    flex-grow: 10;
}
@media (max-width: 208px) {
    .container {
        width: 104px; /* 2 (content divs per line) x 52px (content div's width) */
        flex-grow: 2.5;
    }
}
@media (max-width: 104px) {
    .container {
        width: 52px;
        flex-grow: 0; /* Set value 0 to center content divs inside the container */
    }
}

<div class="wrapper">
    <div class="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>