flexbox中的控件包装对齐方式

Question

我希望所有div都水平和垂直居中，但左侧的标题（海报，大厅卡片和杂项）保持居中状态，无论旁边可能需要多少行他们在他们的权利。

我想用Flexbox做到这一切！

以下是我有：

这里是想什么，我有：

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

预先感谢您:)

Answer 1

对于每个部分（.EPWrapper），您都将标题和图像包裹在同一个柔性容器中。

这意味着当图像开始包装时，它们自然会在第一列（标题下的右侧）开始下一行。

要实现所需的布局，您需要强制图像换行，但在第二列中开始下一行。这也释放了第一列中的空间，以使标题垂直移动。

一种解决方案是将标题和图像放在单独的柔性容器中，并排排列。

下面是使用你的“大堂卡”一节为例：

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