html - Flexbox:如何创建我的缩略图以跨越 100% 的容器宽度？

Question

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

您可以查看 Fiddle 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% 的宽度间距，这意味着对于每行 4 个元素，div 可以占据宽度的 97%。

所以需要设置宽度为97/4 = 24.25% 并取消每第 4 个 child 的 margin 。

.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/