Flexbox：如何创建缩略图以跨越容器宽度的100％？

Question

我正在尝试创建跨越100％包含元素的相等div。

您可以查看小提琴here。如何编写代码来跨越容器侧面的div？

HTML

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

CSS

.container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    background: blue;
}
.container div {
    width: 24%;
    height: 2.5em;
    background-color: red;
    margin-right: 1%;
    margin-bottom: 1em;
    box-sizing: border-box;
}

基本上，我试图复制类似的内容：

Answer 1

对于每行n个元素，存在n-1个缺口。 如果你想要1％宽的间隙，这意味着div可以占据宽度的97％，每行4个元素。

所以你需要将宽度设置为97/4 = 24.25％ 并且每隔4个孩子取消保证金。

.container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    background: blue;
}
.container div {
    width: 24.25%;
    height: 2.5em;
    background-color: red;
    margin-right: 1%;
    margin-bottom: 1em;
    box-sizing: border-box;
}

.container div:nth-child(4n) {
    margin-right:0;
}

http://jsfiddle.net/rq1vkdcg/10/