Control wrapping alignment in flexbox

Question

I'd like all divs to be centered, both horizontally and vertically, but have the headings on the left (Posters, Lobby Cards and Misc) remain centered no matter how many rows may be needed next to them on their right.

And I want to do it all with Flexbox!

Here is what I have:

Here is what I'd like to have:

#hrthick {
  color: #800000;
  background-color: #800000;
  width: 90%;
  height: 10px;
}
.EPWrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.EPHeader {
  width: 200px;
}
.EPContent {
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

<div class="EPButtonInner">
  <div class="EPWrapper">
    <div class="EPHeader">
      <img src="http://i.imgur.com/A7NvL35.png">
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/VtTQdEg">
        <img src="http://i.imgur.com/VtTQdEgm.jpg">
      </a>
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/ELV6u2i">
        <img src="http://i.imgur.com/ELV6u2im.jpg">
      </a>
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/1XoSRx1">
        <img src="http://i.imgur.com/1XoSRx1m.jpg" title="source: imgur.com" />
      </a>
    </div>
  </div>
  <!-- EPWrapper -->
  <hr id="hrthick">
  <div class="EPWrapper">
    <div class="EPHeader">
      <img src="http://i.imgur.com/ZJiFNlg.png">
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/5SmCQPE">
        <img src="http://i.imgur.com/5SmCQPEm.jpg">
      </a>
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/sXj4N3W">
        <img src="http://i.imgur.com/sXj4N3Wm.jpg">
      </a>
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/6eBofBD">
        <img src="http://i.imgur.com/6eBofBDm.jpg">
      </a>
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/7zDGNgk">
        <img src="http://i.imgur.com/7zDGNgkm.jpg">
      </a>
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/VjpjUSu">
        <img src="http://i.imgur.com/VjpjUSum.jpg">
      </a>
    </div>
  </div>
  <!-- EPWrapper -->
  <hr id="hrthick">
  <div class="EPWrapper">
    <div class="EPHeader">
      <img src="http://i.imgur.com/oaTM0xH.png">
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/kD1U5i3">
        <img src="http://i.imgur.com/kD1U5i3m.jpg">
      </a>
      <br>(Herald)</div>
    <div class="EPContent">
      <a href="http://imgur.com/skg6N8u">
        <img src="http://i.imgur.com/skg6N8um.jpg">
      </a>
    </div>
    <div class="EPContent">
      <a href="http://imgur.com/WidGPsF">
        <img src="http://i.imgur.com/WidGPsFm.jpg">
      </a>
    </div>
  </div>
  <!-- EPWrapper -->
</div>
<!-- EPButtonInner -->

Thank You in advance :)

Answer 1

For each section (.EPWrapper), you have the heading and the images wrapped together in the same flex container.

That means that when the images begin to wrap, they will naturally start the next row in the first column (right under the heading).

To achieve the layout you want, you would need to force the images to wrap, but start the next row in the second column. This also frees up the space in the first column for the heading to move around vertically.

One solution is to put the heading and images in separate flex containers, aligned side-by-side.

Here's an example using your "Lobby Cards" section:

/* new */
.headings {
    display: inline-flex;     /* inline-level flex container */
    align-items: center;
    justify-content: center;
}

/* new */
.images {
    display: inline-flex;     /* inline-level flex container */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;          /* images are allowed to wrap in this container */
}

/* original code */
#hrthick {
    color: #800000;
    background-color: #800000;
    width: 90%;
    height: 10px;
}

.EPWrapper {
    display: flex;
    /* flex-wrap: wrap;           remove; this would allow image container to wrap
                                  under the heading container */
    justify-content: flex-start;
    align-items: center;
}

.EPHeader {
    width: 200px;
}

.EPContent {
    -webkit-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

<div class="EPButtonInner">
    <div class="EPWrapper">
        <section class="headings">
            <div class="EPHeader"><img src="http://i.imgur.com/ZJiFNlg.png"></div>
        </section>
        <section class="images">
            <div class="EPContent">
                <a href="http://imgur.com/5SmCQPE"><img src="http://i.imgur.com/5SmCQPEm.jpg"></a>
            </div>
            <div class="EPContent">
                <a href="http://imgur.com/sXj4N3W"><img src="http://i.imgur.com/sXj4N3Wm.jpg"></a>
            </div>
            <div class="EPContent">
                <a href="http://imgur.com/6eBofBD"><img src="http://i.imgur.com/6eBofBDm.jpg"></a>
            </div>
            <div class="EPContent">
                <a href="http://imgur.com/7zDGNgk"><img src="http://i.imgur.com/7zDGNgkm.jpg"></a>
            </div>
            <div class="EPContent">
                <a href="http://imgur.com/VjpjUSu"><img src="http://i.imgur.com/VjpjUSum.jpg"></a>
            </div>
        </section>
    </div>
</div>