控制flexbox中的包装对齐

Question

我希望所有div在水平和垂直方向都居中，但左边的标题（海报，大堂卡和杂项）保持居中，无论他们旁边需要多少行右。

我想用Flexbox做到这一切！

这就是我所拥有的：

以下是我想要的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

提前谢谢你：）

Answer 1

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

这意味着当图像开始换行时，它们会自然地开始第一列中的下一行（标题右下方）。

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

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

以下是使用“大堂卡”部分的示例：

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