수직 높이가 증가하면 div를 아래로 확장하지 않고 위로 확장하려면 어떻게 해야 합니까?

Question

제목과 일부 내용이 포함된 페이지가 있습니다. 헤더는 동적 값이며 내용에 따라 다양한 내용을 가질 수 있습니다. 이 문제는 제목이 길고 두 줄 이상 필요할 때 발생합니다. 나는 콘텐츠가 동일한 수직 및 수평 위치에 있기를 원하기 때문에 긴 제목의 마지막 행이 제목이 더 짧은 경우 첫 번째 행과 동일한 수직 위치에 있기를 원합니다.

나 자신을 다른 사람들이 이해할 수 있기를 바랍니다. 두 번째 단어를 추가하여 제목을 편집해 보면 무슨 뜻인지 알 수 있을 것입니다.

이 문제는 flex-box로 해결될 수 있을 것 같은데, 어떻게 해야할지 모르겠고, flex-end 등으로 여러가지를 시도해 봤습니다.

이것은 내 코드 예제입니다:

으아아아 으아아아

미리 감사드립니다!

편집 이것은 내 목표를 설명하는 잘못 만들어진 이미지입니다. 왼쪽 사진은 제목이 한 줄을 차지한 경우이고, 두 번째 사진은 제목이 두 줄을 차지한 경우입니다.

Answer 1

.wrapper 클래스의 CSS를 변경하세요:

으아아아

여기에서는 display:grid를 사용하여 그리드 레이아웃을 만듭니다. Grid-template-rows 속성은 두 개의 행을 정의합니다. 하나는 제목용이고 다른 하나는 내용용입니다. auto 값을 지정하면 헤더 행이 콘텐츠 높이에 맞게 조정되고, 1fr 값을 지정하면 콘텐츠 행이 남은 공간을 차지하게 됩니다. align-items 및 justify-items 속성은 해당 줄 내에서 콘텐츠를 중앙에 배치합니다.

이제 h1 요소에 className 속성 대신 class 속성이 포함되도록 HTML을 업데이트하세요.

으아아아

이러한 변경으로 인해 헤더는 래퍼 상단에 유지되고 콘텐츠는 헤더 길이에 관계없이 동일한 수직 및 수평 위치에 유지됩니다. 제목 텍스트를 변경하여 테스트하여 다양한 길이에서 어떻게 작동하는지 확인할 수 있습니다.