절대 위치의 Flex 항목이 IE11의 레이아웃에 영향을 미치는 이유는 무엇입니까?

IE11의 일반 흐름에 포함된 절대 위치 Flex 항목

Flexbox 레이아웃에서 요소는 요소를 기준으로 행이나 열로 배열됩니다. 플렉스 속성. 그러나 Flexbox 내의 요소가 절대적으로 배치되면 흐름 외부 요소가 되며 레이아웃에 참여해서는 안 됩니다.

제공된 코드 예에서:

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

".bg" div는 절대 위치에 있습니다. 그럼에도 불구하고 IE11에서는 플렉스 항목 사이의 공간이 ".bg" div가 일반 흐름의 일부인 것처럼 분산됩니다. 이는 Flexbox 사양과의 차이입니다.

해결 방법:

이 문제를 해결하려면 한 가지 해결 방법은 절대 위치에 있는 ".bg" div를 다른 div 사이로 이동하는 것입니다. 두 개의 플렉스 항목:

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

이러한 구조 변경으로 ".bg" div는 더 이상 플렉스 항목 사이의 공간 분포에 영향을 주지 않습니다. 플렉스 아이템을 사용하면 원하는 레이아웃이 완성됩니다.

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