Comment puis-je faire en sorte que des titres de tailles inégales dans des conteneurs flexibles séparés aient des hauteurs égales ?

Enfants d'articles flexibles de même taille

Problème :
Vous voulez que tous les div .block soient de même hauteur, et les . bottom div absolument positionné vers le bas. Cela fonctionne, mais lorsque l'en-tête h2 est trop long et atteint 2 lignes, vous souhaitez que tous les en-têtes h2 de la ligne aient la même hauteur.

Solution :

Il n'est pas possible de y parvenir avec flexbox ou CSS en général.

Le comportement par défaut de Flexbox est d'étirer les éléments flexibles sur toute la hauteur de l'axe transversal, ce qui est connu sous le nom de « flex à hauteur égale ». colonnes." Cependant, cela ne s'applique qu'aux enfants d'un conteneur flexible, pas aux éléments dans des conteneurs différents.

Dans ce cas, les en-têtes h2 sont dans des conteneurs différents, donc la fonctionnalité d'égalité de hauteur ne s'applique pas. De plus, l'application d'une hauteur à un élément flexible remplace le paramètre de hauteur égale.

Remarques supplémentaires :

• Les colonnes de hauteur égale ne s'appliquent qu'à une seule ligne flexible.
• La propriété align-self peut remplacer les éléments d'alignement et rompre la fonction d'égalité de hauteur.
• Égal les colonnes de hauteur ne fonctionnent pas dans les conteneurs flexibles multilignes.
• La même hauteur s'applique à la largeur lorsque la direction de flexion est la colonne.

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!