내 Flexbox가 Internet Explorer 11에서 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

IE에서 Flexbox가 작동하지 않음: 원인 및 해결 방법

지금까지 접한 것처럼 Internet Explorer 11에서는 Flexbox가 제대로 작동하지 않을 수 있습니다. flex 속성의 구문 분석 문제입니다. 다행히 이 문제를 해결할 수 있는 몇 가지 해결 방법이 있습니다.

1. 긴 속성 활용:

속기(예: "flex: 0 0 35%")를 사용하는 대신 긴 속성으로 분류합니다.

flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;

2. Flex-shrink 활성화:

"flex: 0 0 35%"를 다음으로 대체하여 flex-shrink가 활성화되었는지 확인하세요:

flex: 0 1 35%;

3. 백분율 및 단위 없는 값 처리:

특히 IE11 버전이 확실하지 않은 경우 가변 기반의 변형을 사용하세요.

flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4. flex: auto:

"flex: 1" 대신 "flex: auto"("flex: 1 1 auto"와 동일)를 사용하세요. 이렇게 하면 행에서 열 플렉스 방향으로 전환할 때 항목이 접히는 것을 방지할 수 있습니다.

5. 너비/높이 속성 사용:

대체로 기존 너비/높이 속성으로 되돌리는 것이 좋습니다.

6. 블록 레이아웃 선택:

특정 경우에는 블록 레이아웃(예: "display: block")이 플렉스 레이아웃의 실행 가능한 대안이 될 수 있습니다.

추가 팁:

• 0px를 0으로 변환할 수 있는 축소기에 주의하세요. (0%에 영향을 미치지 않는 문제).

• 자세한 내용은 다음 리소스를 참조하세요.

  • Flexbox의 이미지 동작: https://stackoverflow. com/q/23051125
  • IE의 단축 속성과 장기 속성: https://stackoverflow.com/q/24549977

위 내용은 내 Flexbox가 Internet Explorer 11에서 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!