フレックスボックス グリッド内の不均一なサイズの見出しを同じ高さにするにはどうすればよいですか?

フレックスボックス グリッドの高さが不均一な見出し

問題

フレックスボックス グリッド内の子 div には、下位に位置する 2 を含め、同じ高さが望ましいです。 h2 行の見出し。

フレックスボックス制限事項

残念ながら、Flexbox または CSS だけを使用して見出しの高さを均一にすることは現実的ではありません。 Flexbox のデフォルトの動作である「フレックスの高さが等しい列」は、同じコンテナ内のフレックス項目の子にのみ適用されます。

提案された解決策

代わりに、動的に一致させるために jQuery などの JavaScript ライブラリを使用することを検討してください。最も高い見出しの高さ。このアプローチにより、要素が異なるコンテナーに存在する場合でも、不均一な見出しの長さを柔軟に処理できます。

コード スニペット

$(document).ready(function() {
  $(".block-list").each(function() {
    let max_height = 0;
    $(this).find("h2").each(function() {
      max_height = Math.max(max_height, $(this).height());
    });
    $(this).find("h2").height(max_height);
  });
});

以上がフレックスボックス グリッド内の不均一なサイズの見出しを同じ高さにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。