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％的間隙，這意味着divs可以佔用每行4個元素的寬度的97％。

所以你需要設置寬度爲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/