84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
이 문제는 매우 이상합니다. 일반 컨테이너와 Flexbox에서는 다르게 동작합니다.
첫 번째 하위 요소의 글꼴 크기 변경:
이 문제를 어떻게 해결할 수 있나요? Flexbox가 움직이지 않기를 바랍니다.
아마도 이는 첫 번째 하위 요소의 글꼴 크기를 변경할 때만 발생합니다. 두 번째 하위 요소의 글꼴 크기를 변경하는 것은 중요하지 않습니다. 왜 그럴까요?
첫 번째 텍스트의 글꼴 크기가 50px이고 두 번째 텍스트의 글꼴 크기가 0px이고 글꼴 크기를 전환하고 싶다고 가정합니다. 이때 콘텐츠의 높이는 50px입니다. 애니메이션 중간에 두 텍스트의 글꼴 크기가 25px로 변경되므로 콘텐츠의 높이도 25px로 변경됩니다. 애니메이션이 끝나면 다시 50px 및 0px 글꼴 크기가 있으므로 콘텐츠의 높이는 50px입니다.Div의 높이는 콘텐츠의 높이에 따라 조정됩니다.
한 질문에 여러 질문을 하지 마세요."일반"(예: 블록 수준) 컨테이너에 대한 첫 번째 질문이 중복되었습니다. 태그를 사용하여 단락을 크게 만드는 문제에 대해 자세히 논의했습니다.Flex 컨테이너의 경우 이는 Flex 컨테이너가 기준선을 결정하는 방식에 따라 결정됩니다. 관련 사양은 다음과 같습니다.플렉스 항목의 기본 정렬은 "stretch"입니다. 즉, 플렉스 항목이 기준선 정렬에 참여하지 않으므로 첫 번째 점이 적용되지 않습니다.두 번째 점이 적용됩니다. 즉, 각 Flex 컨테이너의 첫 번째 Flex 항목이 개별 Flex 컨테이너가 정렬되는 기준선을 제공한다는 의미입니다.이를 처리하는 표준 방법은 수직 정렬:top을 설정하여 inline-flex 또는 inline-block 컨테이너 요소를 기준선에서 멀리 이동하는 것입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
첫 번째 텍스트의 글꼴 크기가 50px이고 두 번째 텍스트의 글꼴 크기가 0px이고 글꼴 크기를 전환하고 싶다고 가정합니다. 이때 콘텐츠의 높이는 50px입니다. 애니메이션 중간에 두 텍스트의 글꼴 크기가 25px로 변경되므로 콘텐츠의 높이도 25px로 변경됩니다. 애니메이션이 끝나면 다시 50px 및 0px 글꼴 크기가 있으므로 콘텐츠의 높이는 50px입니다.
Div의 높이는 콘텐츠의 높이에 따라 조정됩니다.
한 질문에 여러 질문을 하지 마세요.
"일반"(예: 블록 수준) 컨테이너에 대한 첫 번째 질문이 중복되었습니다. 태그를 사용하여 단락을 크게 만드는 문제에 대해 자세히 논의했습니다.
Flex 컨테이너의 경우 이는 Flex 컨테이너가 기준선을 결정하는 방식에 따라 결정됩니다. 관련 사양은 다음과 같습니다.
플렉스 항목의 기본 정렬은 "stretch"입니다. 즉, 플렉스 항목이 기준선 정렬에 참여하지 않으므로 첫 번째 점이 적용되지 않습니다.
두 번째 점이 적용됩니다. 즉, 각 Flex 컨테이너의 첫 번째 Flex 항목이 개별 Flex 컨테이너가 정렬되는 기준선을 제공한다는 의미입니다.
이를 처리하는 표준 방법은 수직 정렬:top을 설정하여 inline-flex 또는 inline-block 컨테이너 요소를 기준선에서 멀리 이동하는 것입니다.