별도의 Flex 컨테이너에서 크기가 다른 제목의 높이를 동일하게 만들려면 어떻게 해야 합니까?

Flex 항목의 동일한 높이 자식

문제:
모든 .block div의 높이가 동일하고 . 하단 div는 절대적으로 하단에 위치합니다. 이 방법은 작동하지만 h2 제목이 너무 길어서 2줄에 도달하면 행의 모든 ​​h2 제목이 동일한 높이가 되기를 원합니다.

해결책:

이것은 불가능합니다. 일반적으로 Flexbox나 CSS를 사용하여 이를 달성합니다.

Flexbox의 기본 동작은 Flex 항목을 교차축의 전체 높이까지 늘리는 것입니다. "동일한 높이의 열을 구부립니다." 그러나 이는 다른 컨테이너의 요소가 아닌 플렉스 컨테이너의 하위 항목에만 적용됩니다.

이 경우 h2 제목이 다른 컨테이너에 있으므로 동일 높이 기능이 적용되지 않습니다. 또한 플렉스 항목에 높이를 적용하면 동일 높이 설정이 무시됩니다.

추가 참고 사항:

• 동일 높이 열은 단일 플렉스 라인에만 적용됩니다.
• align-self 속성은 정렬 항목을 재정의하고 동일한 높이를 깨뜨릴 수 있습니다. 기능.
• 여러 줄 플렉스 컨테이너에서는 동일한 높이 열이 작동하지 않습니다.
• 플렉스 방향이 열인 경우 너비에 동일한 높이가 적용됩니다.

위 내용은 별도의 Flex 컨테이너에서 크기가 다른 제목의 높이를 동일하게 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!