IE9 이상용 Flexbox를 구현하는 방법은 무엇입니까?

IE9용 Flexbox 대안

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

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

<code class="css">div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}</code>

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

<code class="css">.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}</code>

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

• Flexbox로 레벨 업:

  • 가로 탐색 간격 : display: inline-block;
  • Flexbox 없이 요소 고정: display: table-cell;
  • 양식 대체 정렬
  • flex 순서가 있거나 없는 예

• CSS3 레이아웃:

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

기억하세요:

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

위 내용은 IE9 이상용 Flexbox를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!