IE9용 Flexbox 대안

최신 브라우저는 요소를 배포하고 정렬하는 효율적인 방법을 제공하는 Flexbox CSS 모델을 제공합니다. 그러나 IE9에는 Flexbox 지원이 부족합니다.

IE10에 대한 다음 구현을 고려하십시오.

div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}

IE9에 Flexbox가 없는 문제를 해결하려면 Flexbox 기능을 감지하는 JavaScript 라이브러리인 Modernizr를 통합하는 것이 좋습니다. Modernizr를 사용하면 필요에 따라 대체 스타일을 추가할 수 있습니다. 예:

.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}

자세한 지침은 Zoe Gillenwater의 프레젠테이션을 참조하세요.

• Flexbox로 레벨업:

  • 가로 탐색 간격: 디스플레이: 인라인- block;
  • Flexbox 없이 요소 고정: 표시: table-cell;
  • 양식 대체 정렬
  • 플렉스 순서가 있거나 없는 예

• CSS3 레이아웃:

  • Flexbox와 함께 인라인 블록 사용: 가로 형식
  • Flexbox와 함께 인라인 블록 사용 Flexbox: 수평 탐색

기억하세요:

• IE10에 대한 브라우저 지원은 안정적입니다.
• Autoprefixer는 브라우저 접두어를 처리합니다.
• Modernizr는 대체 기능을 제공합니다.
• Flexbox 채택은 지원되지 않습니다. 독점적인.