フレックスボックスにオートマージンを使用できますが、ガターを固定することはできますか？

Question

私はフレックスボックスをもう少し使っています。それは本当に強力な機能ですが、いくつかの落とし穴があるようです。

私は、例としてjsfiddleを作成したが、私は基本的にから成るレイアウトを持ちたい：

1）それが常に中心とするように割り当てられて幅が、自動マージン無しthumbnails容器。

2）の問題は、私はthumbnails容器に幅を割り当てることができないので、私は最後の行thumbnail:nth-child(lastone)を標的とすることができませんということである

間に 30pxの固定樋と 140px x 140px寸法を有する .thumbnail子要素1行あたりの数がわからないので、30pxのマージンを追加しないようにしてください。その結果、 thumbnailsは中央に配置することができません。右側に30pxの余分なパディングがあるためです。

実際にjsで画面サイズの値を計算しなくてもこの問題を解決できますか？

Answer 1

すべてのサムネイルに15pxの余白を付けることは、すべてのサムネイルに（サムネイルをすべてコンテナの側面に接触させたいと仮定して）欲しいものを達成する最も良い方法です隣り合っている場合はマージンを追加して30pxを与えます）、コンテナに負のマージンを与えて外側の余分なスペースを削除します。

HTML：

<button id="add">Add Child</button> 
<div id="thumbnails"> 
    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 
    <div class="thumbnail th-1"></div> 
    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 
    <div class="thumbnail"></div> 
</div> 

CSS：あなたはすべてのサムネイルの周りに15ピクセルのマージンを持つ気にしない場合は

* { 
    box-sizing: border-box; 
} 

#thumbnails { 
    display: flex; 
    flex-wrap: wrap; 
    width:auto; 
    margin: -15px; /* Negative margin to counter outer thumbnails */ 
    justify-content:center; 
} 

.thumbnail { 
    height: 140px; 
    background: red; 
    width: 140px; 
    margin: 15px; /* Margin applied to all sides */ 
} 

https://jsfiddle.net/ho02uLpz/2/

あなたは#thumbnailsからの負のマージンを削除することができますコンテナ。