Steuerung der Umverpackung Ausrichtung in Flexbox

Question

Ich möchte alle divs zentriert werden, sowohl horizontal als auch vertikal, aber die Überschriften auf der linken Seite (Poster, Lobby Cards und Misc) bleiben zentriert, egal wie viele Zeilen neben benötigt werden sie zu ihrer Rechten.

Und ich möchte alles mit Flexbox machen! Hier

ist, was ich habe:

Hier ist, was ich möchte haben:

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

Vielen Dank im Voraus :)

Answer 1

Für jeden Abschnitt (.EPWrapper), haben Sie die Überschrift und die Bilder zusammen in den gleichen Flex-Container gewickelt.

Das heißt, wenn die Bilder anfangen zu wickeln, werden sie natürlich die nächste Zeile in der ersten Spalte (direkt unter der Überschrift) beginnen.

Um das gewünschte Layout zu erzielen, müssen Sie die Bilder zum Umbrechen zwingen, aber die nächste Zeile in der zweiten Spalte beginnen. Dadurch wird auch der Platz in der ersten Spalte freigegeben, in dem die Überschrift vertikal verschoben werden kann.

Eine Lösung besteht darin, die Überschrift und die Bilder in separate Flex-Container nebeneinander ausgerichtet zu platzieren.

Hier ist ein Beispiel Ihre "Lobby-Karten" Abschnitt mit:

/* 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>