하위 요소의 글꼴 크기를 변경하면 Flex 컨테이너가 원래 위치에서 벗어나는 이유는 무엇입니까?

Question

이 문제는 매우 이상합니다. 일반 컨테이너와 Flexbox에서는 다르게 동작합니다.

첫 번째 하위 요소의 글꼴 크기 변경:

• 일반 용기의 경우 용기 높이가 달라지는 이유는 무엇인가요?
• 탄성 상자의 경우 왜 탄성 상자가 일정 거리에서 아래 또는 위로 움직이게 되나요?

이 문제를 어떻게 해결할 수 있나요? Flexbox가 움직이지 않기를 바랍니다.

아마도 이는 첫 번째 하위 요소의 글꼴 크기를 변경할 때만 발생합니다. 두 번째 하위 요소의 글꼴 크기를 변경하는 것은 중요하지 않습니다. 왜 그럴까요?

으아악 으아악

Answer 1

첫 번째 텍스트의 글꼴 크기가 50px이고 두 번째 텍스트의 글꼴 크기가 0px이고 글꼴 크기를 전환하고 싶다고 가정합니다. 이때 콘텐츠의 높이는 50px입니다. 애니메이션 중간에 두 텍스트의 글꼴 크기가 25px로 변경되므로 콘텐츠의 높이도 25px로 변경됩니다. 애니메이션이 끝나면 다시 50px 및 0px 글꼴 크기가 있으므로 콘텐츠의 높이는 50px입니다.

Div의 높이는 콘텐츠의 높이에 따라 조정됩니다.

Answer 2

한 질문에 여러 질문을 하지 마세요.

"일반"(예: 블록 수준) 컨테이너에 대한 첫 번째 질문이 중복되었습니다. <small> 태그를 사용하여 단락을 크게 만드는 문제에 대해 자세히 논의했습니다.

Flex 컨테이너의 경우 이는 Flex 컨테이너가 기준선을 결정하는 방식에 따라 결정됩니다. 관련 사양은 다음과 같습니다.

플렉스 항목의 기본 정렬은 "stretch"입니다. 즉, 플렉스 항목이 기준선 정렬에 참여하지 않으므로 첫 번째 점이 적용되지 않습니다.

두 번째 점이 적용됩니다. 즉, 각 Flex 컨테이너의 첫 번째 Flex 항목이 개별 Flex 컨테이너가 정렬되는 기준선을 제공한다는 의미입니다.

이를 처리하는 표준 방법은 수직 정렬:top을 설정하여 inline-flex 또는 inline-block 컨테이너 요소를 기준선에서 멀리 이동하는 것입니다.