複数の子要素を同じ高さに揃えつつ、各子要素内のコンテンツを上下中央に配置するテクニックです。カードレイアウトやリストでよく使います。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
高さ揃えはFlexboxの標準動作（align-itemsの初期値stretch）をそのまま使います。各カードに flex: 1 1 0 を指定すると内容量に関係なく等幅になり、行内で最も背の高いカードに全員の高さが揃います。カードの内側にもう1段flexコンテナを作り、justify-content: center で中身を上下中央に置くのがこのレシピの2段構えです。min-width: 0 は長文での折り返し崩れを防ぐ保険です。
親にdisplay: flex; 子にalign-items: stretch; 子要素内にjustify-content: center; align-items: center;でOK。min-width: 0;で折り返しも安全。
横並びカードの高さを揃え、各カードの中身を上下中央に配置するレイアウトを作ってください。flex: 1 1 0で等幅化し、カード内は縦方向のflexでjustify-content: centerを使ってください。