フレックスボックスの制御ラッピングアラインメント

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）には、見出しと画像が同じフレックスコンテナにまとめられています。

これは、画像が折り返し始めると、最初の列（見出しのすぐ下）の次の行が自然に開始されることを意味します。

必要なレイアウトを実現するには、イメージを強制的に折り返して、2番目の列の次の行を開始する必要があります。これにより、見出しが垂直方向に移動するための最初の列のスペースも解放されます。

解決策の1つは、見出しと画像を別々のフレックスコンテナに並べて並べて並べることです。ここで

は、あなたの「ロビーカード」を使用した例です：

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