同じレベル/高さの列の内容を表示

Question

divの列はdisplay:flexに設定されています。すべての列が中央に配置されます。列の内容はすべてvertical-align: middle;

コンテンツがすべて同じ高さの場合に効果的です（スニペットを参照）。

です：一つの列が他よりも背が高いとき最も高い列が途中で縦に残っている間しかし、私は、短い列が以下の私の画像のように、最も高い列と同じレベル/高さになりたいですこれはCSSまたはJavaScriptを使用して可能ですか？

.cont { height:400px; width: 100% } 
 
.button-bottom {display: flex; 
 
align-items: center; 
 
justify-content: center; height:50%;background: yellow;} 
 

 
.column {width: 20%; 
 
display: table-cell; 
 
text-align: center; 
 
vertical-align: middle; 
 
float: none;}

<div class="cont"> 
 
    <div class="button-bottom"> 
 
    <div class="column"> 
 
     <h5>Ambience Blah BLha mana na hhsjs</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
    <h5>Ambience</h5> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

私はポイントのためにこれを行います。ここにあなたの修正があります。

.cont { height:400px; width: 100% } 
 
.button-bottom {display: flex; 
 
justify-content: center; height:50%;background: yellow;} 
 
.column {width: 20%; 
 
display: table-cell; 
 
float: none;}

<div class="cont"> 
 
    <div class="button-bottom"> 
 
    <div class="column"> 
 
     <h5>Ambience Blah BLha mana na hhsjs</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
    <h5>Ambience</h5> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 2

https://jsfiddle.net/ex3ntia/r67y6hhu/3/

私はあなたがポイントをしたい場合は、あなたの答えに説明を追加

/* demo */ 
h5 {position:relative;} 
.column h5:before {display:block;background-color:red;content:'';width:100%;height:2px;top:15px;position:absolute;}