Flexbox quirks, centering of grid

Question

I love flexbox but there are a few short comings that I can't wrap my head around:

In the example below, is there a way to have the space between the articles even, and equal with the space on the sides

In additioon, can the last row not be centered, but rather left aligned with the same spacing as the content on top of it?

Example: 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;
}

Flexbox quirks, centering of grid

0 Answers0