Flexboxで横並びした時、各ボックスの中の孫要素の高さも揃えたい

Flexboxは横並びにした時、ボックスの高さをそろえてくれて便利です。
アイテムの配置を指定してくれるalign-itemsプロパティの初期値 [ stretch ] によるものです。
{align-items: stretch;}

しかし、折角ボックス（ここでは子要素）の高さを揃えたのに、ボックスの中身の孫要素（ブログサイトの投稿記事のタイトル等）の高さが不揃いだとなんかスッキリしないことないでしょうか。
そういう時にとても簡単に使えて活躍してくれるjQueryプラグインのご紹介です。

contents

完成イメージ
使用するファイル・jQueryプラグイン
事前準備
- ダウンロードしてHTMLファイルで読み込み
コード記載例
まとめ

完成イメージ

投稿日の高さがそろっていることから、文字数の異なるタイトルの高さが揃っていることが分かると思います。

※後日追記
上記の画像は、WordPressのテーマを自作していた時の画像です。
現在は、Cocoonのテーマを使用させていただいています。

使用するファイル・jQueryプラグイン

JavaScript
matchHeight.js
HTML（上記読み込みの為）

事前準備

ダウンロードしてHTMLファイルで読み込み

下記にアクセスし、/dist/にある「jquery.matchHeight-min.js」をダウンロードします。
https://github.com/liabru/jquery-match-height
オプション等も記載されていますので、ご興味があればご参照ください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.matchHeight-min.js"></script>

最新のjQueryバージョン3.6.0では動作未確認ですが、3.5.1バージョンでは動作確認済みです。
JavaScriptファイル名やディレクトリ名はご自身の環境に合わせて適宜変更してください。
因みに、「jquery.matchHeight-min.js」はCDNで読み込みもできるようです。

コード記載例

$(function() {
    $('.blog-title').matchHeight();
    $('.blog-excerpt').matchHeight();　// 下にタグリストを配置する場合はあった方がより見栄えがよいかと。
});

説明

見たまま、高さを揃えたいセレクタを指定するだけです。
必要に応じて、$(window).on(‘load resize’, function(){ // 処理を記載　と組み合わせてください。
注意点は、サイドバーでも最近の投稿等を表示していて、mainとasideで同一クラスを持っているものがある場合は、$(‘main .blog-title’)としてください。

まとめ

jQueryには明るくない方でも簡単に利用でき、とても便利でおすすめです。
新しいプラグインではないようですが、想像するに、Flexboxの機能が追加されたCSS3がリリースされ、各ブラウザがFlexboxに対応し始めた移行期くらいのリリースなのでしょうか。
当サイトでも利用させていただいています。