ネストされたアイテムの高さが同じネストされたフレックスボックス

Question

フレックスボックスをレイアウトに使用するカードパターン（material designと同様）を実装しようとしています。各カードにはヘッダーとコンテンツがあり、フレックスボックスを使用してそれらのアレンジを行います。

カードの幅は固定されているため、ヘッダーが長い場合はラップしてヘッダーを長くします。問題は、一列の各カードが一貫して見えるようにするためです。行の各ヘッダーの高さを同じにします。

カードの高さは、フレックスボックスのおかげですでに一貫しています。私はヘッダーの高さを一貫させる方法を知らない。

基本的なレイアウトは次のとおりです。

<div class="flex-container"> 
    <div class="flex-item"> 
     <div class="flex-header"> 
      My header 
     </div> 
     <div class="flex-content"> 
      My content 
     </div> 
    </div> 

    <div class="flex-item"> 
     <div class="flex-header"> 
      My header 
     </div> 
     <div class="flex-content"> 
      My content 
     </div> 
    </div>  
</div> 

フレキシボックスのCSS：私はまた、例えばcodepenを持って

.flex-container { 
    display: flex; 
    flex-flow: row wrap; 
} 

.flex-item { 
    width: 200px; 
    margin: 10px; 

    display: flex; 
    flex-flow: column; 
} 

.flex-header { 
    background-color: navy; 
    font-size: 2em; 
} 

.flex-content { 
} 

。

Answer 1

.flex-ヘッダーに

例分の高さを追加します。

.flex-header { 
    background-color: navy; 
    font-size: 2em; 
    min-height: 80px; 
} 

Answer 2

をしたい動作がテーブルで唯一のHTMLインターフェイスで見つかったユニークです。

1. table
2. table-row
3. table-cell

：すべての不満を避け、レ​​イアウトのためにテーブルを使用する方法について皆から講義をするためには、の値を持つdisplayプロパティを使用してみてくださいこれらの値の使用はthisとなります。私はあなたが言及し、それだけでCSSでは不可能であることを、ここで答えを読んだ後、私はJSのソリューションを試してみましたが、この素晴らしいライブラリhereを見つけました。同じレイアウトを作るために探していた

CODEPEN

Answer 3

私はcodepen exampleを作成しました。それは同じものを探している人を助けるかもしれません。 ライブラリを追加して、次のjQueryコードを使用するだけです。

$('.item-image').matchHeight({ 
    byRow: true, 
    property: 'height', 
    target: null, 
    remove: false 
}); 

よろしく