フレックスボックスを使用して特定のグリッドを達成する

Question

フレックスボックスを使用して自分のウェブサイトのグリッドを作成しています。グリッドは記事アーカイブに使用され、各記事間にマージンを入れて1行につき3つの記事を表示する必要があります。

問題は次のとおりです。記事のボックスは、行の先頭から開始し、行の最後で正確に終了する必要があります。だから明白なことはjustify-content: space-between;を使用することでした。だから、flex-wrap: wrapに加えて、私は必要なグリッドを作成しました。私に記事が奇数になるまで。その後、次の例に見ることができるようjustify-contentプロパティは、行の途中に空白を残し：

http://codepen.io/Naxon/pen/NbNXVj

それは関係なく、コンテナの幅が何であるかという、私にとって非常に重要です項目は最初から開始され、最後は終了します。

どうすればこの問題を解決できますか？

Answer 1

Flexboxはアイテム間のパディングをサポートしていませんが、calc()とmarginで偽造することができます。 Codepen

.container { 
 
    width: 800px; 
 
    height: 800px; 
 
    background-color: blue; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    /*justify-content: space-between;*/ 
 
} 
 

 
.item { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: green; 
 
    /* margins */ 
 
    margin-left: 10px; 
 
    /* figure out width taking margins into account */ 
 
    flex-basis: calc((100% - 20px)/3); 
 
} 
 
/* clear margin on every third item starting with the first */ 
 
.item:nth-child(3n+1) { 
 
    margin-left: 0; 
 
}

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