플렉스 레이아웃의 자주색 슬래시 영역이 잘못된 '오버플로 공간'으로 간주되는 이유는 무엇입니까?

플렉스 레이아웃에서 보라색 슬래시 영역에 대한 자세한 설명

플렉스 레이아웃을 사용할 때 개발자 도구에 나타나는 자주색 슬래시 영역은 종종 혼란 스럽습니다. 그것은 실제 오버플로가 아니라 플렉스 레이아웃에서 "나머지 공간"을 시각적으로 표현합니다. 이 기사는 그 원인을 설명 할 것입니다.

장면이 나타납니다

부모 요소 a 에 두 개의 아동 요소가 포함되어 있다고 가정합니다. 여기서 두 번째 자식 요소는 상위 요소 a 보다 높이가 높습니다. 개발자 도구에는 보라색 슬래시 영역이 표시됩니다 (아래 그림과 같이).

오해와 진실

보라색 슬래시 영역은 시각적 오버플로가 아니라 플렉스 레이아웃에서 "나머지 공간"을 나타냅니다. MDN 문서에 언급 된 "음성 여유 공간"은이 현상을 설명합니다. 자식 요소 높이가 상위 요소를 초과하면 "나머지 공간"은 음수 일 수 있으므로 오버플로처럼 시각적으로 보입니다.

심층적 인 이해

"나머지 공간"은 항상 긍정적 값이 아니며, 음수가 될 수 있습니다. 따라서 오버플로처럼 시각적으로 보이 더라도이 영역은 여전히 ​​공간을 할당하는 데 플렉스 레이아웃에 사용되는 "나머지 공간"입니다. 이것은 Flex 레이아웃의 올바른 사용에 필수적입니다.

위 내용은 플렉스 레이아웃의 자주색 슬래시 영역이 잘못된 '오버플로 공간'으로 간주되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!