フレックスdivコンテナ内の2行にh3タグを表示することができません

Question

私は次の例を使用していますが、各項目に2つのタイトルを付ける必要があります。 <div> div inside liはflexと定義されています。複数の要素を追加すると2つの列として表示されますが、2行と中央に水平に整列したい&

私はセンターでそれらをしたいしながら、私はブロックするようにフレックスまたは、他の財産のトップにタイトルの動きを変更した場合

最小限のCSSでそれを修正する方法がわからない

http://codepen.io/anon/pen/XNqYWd

<ul class="cbp-rfgrid"> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Heading One</h3> 
     <h3>Date</h3> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
      <h3>Heading One</h3> 
     <h3>Date</h3> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
      <h3>Heading One</h3> 
     <h3>Date</h3> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Heading One</h3> 
     <h3>Date</h3> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
    <li> 
    <a href="#"><img src="http://placehold.it/600x400"> 
     <div> 
     <h3>Felis catus</h3></div> 
    </a> 
    </li> 
</ul> 

Answer 1

.cbp-rfgrid li a div { 
    flex-direction: column; /* Flex Direction Column */ 
    justify-content: center; /* Vertically Aligns Content (on flex-direction: column) */ 
} 

のように、 flex-directionとのプロパティを使用します。

.cbp-rfgrid { 
 
\t margin: 35px 0 0 0; 
 
\t padding: 0; 
 
\t list-style: none; 
 
\t position: relative; 
 
\t width: 100%; 
 
} 
 

 
.cbp-rfgrid li { 
 
\t position: relative; 
 
\t float: left; 
 
\t overflow: hidden; 
 
\t width: 16.6666667%; /* Fallback */ 
 
\t width: -webkit-calc(100%/6); 
 
\t width: calc(100%/4); 
 
    margin:1px; 
 
} 
 

 
.cbp-rfgrid li a, 
 
.cbp-rfgrid li a img { 
 
\t display: block; 
 
\t width: 100%; 
 
\t cursor: pointer; 
 
} 
 

 
.cbp-rfgrid li a img { 
 
\t max-width: 100%; 
 
} 
 

 
/* Flexbox is used for centering the heading */ 
 
.cbp-rfgrid li a div { 
 
\t position: absolute; 
 
\t left: 20px; 
 
\t top: 20px; 
 
\t right: 20px; 
 
\t bottom: 20px; 
 
\t background: rgba(71,163,218,0.2); 
 
\t display: -webkit-flex; 
 
\t display: -moz-flex; 
 
\t display: -ms-flex; 
 
\t display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
\t -webkit-align-items: center; 
 
\t -moz-align-items: center; 
 
\t -ms-align-items: center; 
 
    align-items: center; 
 
    text-align: center; 
 
    opacity: 0; 
 
} 
 

 
.cbp-rfgrid li a:hover div { 
 
\t opacity: 1; 
 
} 
 

 
.cbp-rfgrid li a div h3 { 
 
\t width: 100%; 
 
\t color: #fff; 
 
\t text-transform: uppercase; 
 
\t font-size: 1.4em; 
 
\t letter-spacing: 2px; 
 
\t padding: 0 10px; 
 
} 
 

 
/* Example for media query: change number of items per row */ 
 

 
@media screen and (max-width: 1190px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 20%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/5); 
 
\t \t width: calc(100%/5); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 945px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 25%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/4); 
 
\t \t width: calc(100%/4); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 660px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 33.3333333%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/3); 
 
\t \t width: calc(100%/3); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 660px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 33.3333333%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/3); 
 
\t \t width: calc(100%/3); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 400px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 50%; /* Fallback */ 
 
\t \t width: -webkit-calc(100%/2); 
 
\t \t width: calc(100%/2); 
 
\t } 
 
} 
 

 
@media screen and (max-width: 300px) { 
 
\t .cbp-rfgrid li { 
 
\t \t width: 100%; 
 
\t } 
 
}

<ul class="cbp-rfgrid"> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Heading One</h3> 
 
     <h3>Date</h3> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
      <h3>Heading One</h3> 
 
     <h3>Date</h3> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
      <h3>Heading One</h3> 
 
     <h3>Date</h3> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Heading One</h3> 
 
     <h3>Date</h3> 
 
     </div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"><img src="http://placehold.it/600x400"> 
 
     <div> 
 
     <h3>Felis catus</h3></div> 
 
    </a> 
 
    </li> 
 
</ul>

・ホープ、このことができます：

は以下のスニペット（使用フルスクリーン）を見てください！