Zaphod Beeblebrox
Zaphod Beeblebrox

Reputation: 13

Control wrapping alignment in flexbox

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:

enter image description here

Here is what I'd like to have:

enter image description here

#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 :)

Upvotes: 1

Views: 66

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372264

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>

Upvotes: 1

Related Questions