は反対方向にフレキシボックスの子供

Question

私はブートストラップ4列/カード内この効果を達成したいの成長しますか？私は以下のソリューションについて考えていた

https://jsfiddle.net/dandaka/us04p2vg/

<div class="container"> 
    <div class="row"> 
    <div class="col"> 
     <div class="img-top"><img src="https://placehold.it/350x100" alt="" class="img-fluid"></div> 
     <div class="text-bottom">Lorem ipsum</div> 
    </div> 
    <div class="col"> 
     <div class="img-top"><img src="https://placehold.it/350x50" alt="" class="img-fluid"></div> 
     <div class="text-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div> 
    </div> 
    <div class="col"> 
     <div class="img-top"><img src="https://placehold.it/350x250" alt="" class="img-fluid"></div> 
     <div class="text-bottom">Lorem ipsum dolor sit amet</div> 
    </div> 
    </div> 
</div> 

：

• は、画像とテキストのために複数の行を使用し

  これは私がと遊ぶ私のソースコードです。小さいブレークポイントで積み重ねるときにうまくいく。そして、カード全体がホバー状態になっていなければなりません。これは2行で壊れたときにうまくいくでしょう。

• ブートストラップカードを使用してください。彼らは固定された高さの画像でのみ動作するようです。
• フレックスボックスのベースラインアライメントを使用します。 2つの要素が1つの軸から異なる方向に成長する例は見つかりません。
• テキストブロックの高さをピクセルで固定します。まったく解決策ではなく、単なる回避策です。

何も考えられません。

Answer 1

1つの方法は、上部画像と下部テキストに％高さを設定することです。その後..それがBS4に含まれているので、私は50/50を使用していますが、トップ/ボトムの割合をカスタマイズすることができ

<div class="row align-items-baseline"> 
    <div class="col"> 
     <div class="img-top d-flex h-50"><img src="https://placehold.it/350x100" alt="" class="align-self-end img-fluid"></div> 
     <div class="text-bottom p-3 h-50">Lorem ipsum her eis some more text</div> 
    </div> 
    <div class="col"> 
     <div class="img-top d-flex h-50"><img src="https://placehold.it/350x50" alt="" class="align-self-end img-fluid"></div> 
     <div class="text-bottom p-3 h-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div> 
    </div> 
    <div class="col"> 
     <div class="img-top d-flex h-50"><img src="https://placehold.it/350x250" alt="" class="align-self-end img-fluid"></div> 
     <div class="text-bottom p-3 h-50">Lorem ipsum dolor sit amet</div> 
    </div> 
</div> 

http://www.codeply.com/go/vc8Mk2Rjm0

..応じてアイテムを揃えるために

.h-40 { 
    height: 40%; 
} 
.h-60 { 
    height: 60%; 
} 

をフレキシボックスを使用します

http://www.codeply.com/go/whe449Ixtx