Wie kann ich dafür sorgen, dass ungleich große Überschriften in separaten Flex-Containern die gleiche Höhe haben?

Untergeordnete Elemente von Flex-Elementen gleicher Höhe

Problem:
Sie möchten, dass alle .block-Divs die gleiche Höhe haben und die . unteres div absolut nach unten positioniert. Das funktioniert, aber wenn die h2-Überschrift zu lang ist und 2 Zeilen erreicht, möchten Sie, dass alle h2-Überschriften der Zeile die gleiche Höhe haben.

Lösung:

Das ist nicht möglich Erreichen Sie dies mit Flexbox oder CSS im Allgemeinen.

Das Standardverhalten von Flexbox besteht darin, Flex-Elemente auf die volle Höhe der Querachse zu strecken, was als „Flex gleicher Höhe“ bekannt ist Spalten.“ Dies gilt jedoch nur für untergeordnete Elemente eines Flex-Containers, nicht für Elemente in unterschiedlichen Containern.

In diesem Fall befinden sich die h2-Überschriften in unterschiedlichen Containern, sodass die Funktion „gleiche Höhe“ nicht anwendbar ist. Darüber hinaus überschreibt das Anwenden einer Höhe auf ein Flex-Element die Einstellung für die gleiche Höhe.

Zusätzliche Hinweise:

• Spalten mit gleicher Höhe gelten nur für eine einzelne Flex-Linie.
• Die Eigenschaft „align-self“ kann align-items überschreiben und die Funktion „Gleiche Höhe“ unterbrechen.
• Gleich Höhenspalten funktionieren nicht in mehrzeiligen Flex-Containern.
• Gleiche Höhe gilt für die Breite, wenn die Flexrichtung Spalte ist.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass ungleich große Überschriften in separaten Flex-Containern die gleiche Höhe haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!