【SCSS/CSS🔰】カード内テキストの行数がバラバラになる！高さを統一させる方法

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

現象

画像、タイトル、テキスト、ボタンなどの構成のカードで、
テキストの行数が片や１行、片や２行とバラバラな時、全体の高さもバラバラになってしまう。
ボタンの位置が上につまる。

対象方法

親要素をflexに設定し、子要素にflex１を指定することで解決した。

.parent {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}

.child {
flex: 1;
}

特定の場所だけ行数が違うケース

テキストの行が1行のところと2行のところが混在している時に使う方法として、

min-height: 2lh;

がある。
これは21ではなく２Lで「２Line Hight」

2行の高さを確保することで、高さを合わせることも可能。