Flexbox怪癖，网格居中

Question

我喜欢弹性盒，但有一些短片让我无法理解：

在下面的例子中，有没有办法让文章之间的空间均匀，并且与两边的空间相等

另外，最后一行是否可以居中，而是左对齐，其间距与内容相同？

示例：http://codepen.io/anon/pen/rrqvyN

<div class="container">
  <aside class="sidebar">
  </aside>
  <main>
    <div class='wrapper'>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article><article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
      <article>
        <img src='https://unsplash.it/200/300/?random'/>
      </article>
    </div>
  </main>
</div>

html, body {
  margin: 0;
  padding: 0;
}

.sidebar {
  width: 200px;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: red;
}

main {
  width: auto;
  margin-left: 200px;
  background: gray;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

article {
  flex: 0 0 20%;
  text-align: center;
  padding-bottom: 20px;
  background: seagreen;
}