Comment puis-je faire en sorte que les titres de taille inégale dans une grille Flexbox aient des hauteurs égales ?

En-têtes de hauteur inégale dans une grille Flexbox

Problème

Des hauteurs égales sont souhaitées pour les divs enfants dans une grille Flexbox, y compris leurs 2- positionnés en bas en-têtes de ligne h2.

Flexbox Limitations

Malheureusement, il n'est pas possible d'obtenir des hauteurs de titre uniformes uniquement avec Flexbox ou CSS. Le comportement par défaut de Flexbox, « colonnes flexibles de hauteur égale », s'applique uniquement aux enfants d'éléments flexibles dans le même conteneur.

Solution proposée

Comme alternative, envisagez d'utiliser une bibliothèque JavaScript telle que jQuery pour faire correspondre dynamiquement la hauteur du cap le plus haut. Cette approche permet une gestion flexible des longueurs de titre inégales, même lorsque les éléments résident dans des conteneurs différents.

Extrait de code

$(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);
  });
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!