（align-item）stretched divの下にdivを配置する

Question

align-itemを使用して複数のflex-itemsの下にdivを配置したいと思います。すべてのアイテムを同じ高さにする。そして、divの後ろにdivを配置しても、それは上のdivの伸びた高さの下になります。

現在の結果

これは、この私はまた、画像をラップできるようにしたいと思い、現在のCSSで現在のHTML

<ul class="flex-container stretch"> 
     <li class="flex-item"><img src="1.png" /> 
      <div class="info"> 
        <div class="detail"> 
          <div class="image"> 
             <img src="camera.png"/> 
          </div> 
        </div> 
        <div class="detail"> 
          <div class="image"> 
             <img src="camera.png"/> 
          </div> 
        </div> 
        <div class="detail"> 
          <div class="image"> 
             <img src="camera.png"/> 
          </div> 
        </div> 
        <div class="detail"> 
          <div class="image"> 
             <img src="camera.png"/> 
          </div> 
        </div> 
      </div> 
     </li> 
     <li class="flex-item"><img src="2.png" /></li> 
     <li class="flex-item"><img src="1.png" /></li> 
     <li class="flex-item"><img src="2.png" /></li> 
</ul> 

です。そしてすべてを反応させる。

.flex-container { 
padding: 0; 
margin: 0; 
list-style: none; 
     -ms-box-orient: horizontal; 
     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -moz-flex; 
     display: -webkit-flex; 
     display: flex; 
     float: left; 
     flex-wrap: wrap; 
} 
.stretch { 
-webkit-align-items: stretch; 
     align-items: stretch; 
} 
.flex-item{ 
     width: 23%; 
     margin: 0 1%; 
     background: orange; 
} 
.flex-item img{ 
width: 100%; 
} 
.info{ 
     padding:35px 0; 
     width:100%; 
     float:left; 
     left:0; 
     text-align:center; 
     display:none; 
     position:absolute; 
     z-index:999; 
     background: #fff; 
} 
.info .detail{ 
     width:25%; 
     float:left; 
} 

.info image{ 
     width:65%; 
} 

期待される結果

感謝。

Answer 1

垂直マージンを設定しない場合、要素はセルに沿って伸び、行の各項目は同じheightになります。

画像の2行目をabsoluteに表示するには、親をrelativeに設定する必要がありますので、サイズと座標の参照になります。

ここでは各親は行全体の1つの平均クォートであり、マージンはそれらの間にあることに注意してください。

表示される行は、平均で400％width + XX％marginが合計で加算されます。

下に表示するには、top:100%を使用して、最後にmargin-topを追加してギャップを空けてください。

.flex-container { 
 
padding: 0; 
 
margin: 0; 
 
list-style: none; 
 
     -ms-box-orient: horizontal; 
 
     display: -webkit-box; 
 
     display: -moz-box; 
 
     display: -ms-flexbox; 
 
     display: -moz-flex; 
 
     display: -webkit-flex; 
 
     display: flex; 
 
     float: left; 
 
     flex-wrap: wrap; 
 
} 
 
.stretch { 
 
/* this was defaut behavior */ 
 
} 
 
.flex-item{ 
 
     width: 23%; 
 
     margin: 0 1%; 
 
     background: orange; 
 
} 
 
.flex-item img{ 
 
width: 100%; 
 
} 
 
/* ========================================================= update*/ 
 
.flex-item { 
 
    position:relative; 
 
} 
 
.flex-item > img:hover ~ .info { 
 
    top:100%; 
 
    display:flex ; 
 
} 
 
.info{ 
 
     min-width:426%; 
 
     top:100%; 
 
/* ========================================================= end update */ 
 
     padding:35px 0; 
 
     left:0; 
 
     text-align:center; 
 
     position:absolute; 
 
     z-index:999; 
 
     background: #fff; 
 
     display:none ; 
 
} 
 

 
.info .detail{ 
 
     min-width:25%; 
 
     float:left;/* useless when parent is a flex box */ 
 
     margin:0 ; 
 
} 
 

 
.info image{/* !!! this rule does nothing. there is no tag image in your HTML structure */ 
 
     width:65%; 
 
}

<ul class="flex-container stretch"> 
 
     <li class="flex-item"><img src="http://dummyimage.com/300x300/&text=Hover_me" /> 
 
      <div class="info"> 
 
        <div class="detail"> 
 
          <div class="image"> 
 
             <img src="http://dummyimage.com/300x300/bad/&text=camera.png"/> 
 
          </div> 
 
        </div> 
 
        <div class="detail"> 
 
          <div class="image"> 
 
             <img src="http://dummyimage.com/300x300/0d8/&text=camera.png"/> 
 
          </div> 
 
        </div> 
 
        <div class="detail"> 
 
          <div class="image"> 
 
             <img src="http://dummyimage.com/300x300/456/&text=camera.png"/> 
 
          </div> 
 
        </div> 
 
        <div class="detail"> 
 
          <div class="image"> 
 
             <img src="http://dummyimage.com/300x300/f00/&text=camera.png"/> 
 
          </div> 
 
        </div> 
 
      </div> 
 
     </li> 
 
     <li class="flex-item"><img src="http://dummyimage.com/300x300/&text=2.png" /><br/> something more</li> 
 
     <li class="flex-item"><img src="http://dummyimage.com/300x300/&text=1.png" /></li> 
 
     <li class="flex-item"><img src="http://dummyimage.com/300x300/&text=2.png" /></li> 
 
</ul>