IE11이 레이아웃 계산에 절대 위치 Flex 항목을 포함하는 이유는 무엇입니까?

IE11의 흐름에서 고려되는 절대 위치 Flex 항목

문제

콘텐츠가 채워진 두 개의 div와 하나의 절대 위치에 있는 배경 div가 있는 Flexbox 컨테이너에서 , IE11(및 버전 52 이전의 Firefox)은 공간 분포를 계산할 때 절대 위치 div를 고려합니다. 이 동작은 절대 위치 항목이 플렉스 레이아웃에 참여하지 않는다는 Flexbox 사양에서 벗어납니다.

해결 방법

절대 위치 Div 재배치

가능한 해결책은 그림과 같이 절대 위치에 있는 div를 다른 두 div 사이로 이동하는 것입니다. 아래:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

Flex Wrap 사용

또 다른 해결 방법은 Flex Wrap을 사용하여 절대 위치에 있는 항목을 새 줄로 강제로 감싸는 것입니다. 이렇게 하면 다른 항목의 공간 분배에 영향을 주지 않습니다.

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

Firefox(v52까지): 기본 동작 재정의

Firefox(이전 버전) 52), 이 CSS 속성을 사용하여 기본 동작을 재정의하고 흐름에서 절대 위치에 있는 div를 제거할 수 있습니다.

.container {
    display: -moz-box;  /* Firefox specific property */
    -moz-box-orient: horizontal;  /* Firefox specific property */
}

위 내용은 IE11이 레이아웃 계산에 절대 위치 Flex 항목을 포함하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!