【CSS】flexboxで子要素、孫要素の高さをそろえる方法

flexコンテナの子要素の高さをそろえることはcssのflexレイアウトでデフォルトで可能すが、テキストエリアなどの孫要素の高さは対応をしなければ以下の様にバラバラになってしまいます。

.flex-card_bara

.flex-img

.flex-text
text
text

.flex-btn

.flex-card_bara

.flex-img

.flex-text
text
text
text

.flex-btn

.flex-card_bara

.flex-img

.flex-text
text

.flex-btn

height.jsなどjsを使用することで対応できますが動作が重くなりパフォーマンス低下の恐れがあります。

今回はflexコンテナの孫要素の高さをcssでそろえる方法の覚書になります。

• flexboxの子要素の設定
• flexboxの孫要素の設定
• サンプル

flexboxの子要素の設定

まず flexコンテナの子要素（.flex-card）に
display: flex;
flex-direction: column;
を設定します。

display: flex;にすることで要素が横並びになってしまうので flex-direction: column; にすることで要素を縦積みにします。

.wrap-flex .flex-card {
    width: 31%;
    background: #000000;
    padding: 20px;
    font-size: 120%;
    font-weight: bold;
    display: flex;
    flex-direction: column;
}

flexboxの孫要素の設定

高さを合わせたい要素に
flex-grow: 1;
を設定することで2段目の余っているエリアを自動的に決定します。

.flex-card .flex-text {
    flex-grow: 1;
}

サンプル

こちらが実際のデモになります。

.flex-card

.flex-img

.flex-text
text
text

.flex-btn

.flex-card

.flex-img

.flex-text
text
text
text

.flex-btn

.flex-card

.flex-img

.flex-text
text

.flex-btn

ポイントはflex-direction: column;と flex-grow: 1;。これだけで.flex-textの高さがそろいました~