CSS 시리즈 플렉스 호환성에 대한 심층적인 이해

작성하는 페이지 수가 늘어나면서 CSS 호환성 문제도 많이 발생했습니다. 이러한 호환성 문제는 기술이 끊임없이 발전하기 때문에 피할 수 없는 문제이므로, 해소되지 않으려면 일부 호환성 처리를 수행해야 합니다. 이번 글은 CSS에서 flex의 호환성을 주로 소개합니다. 도움이 필요한 친구들이 참고하면 좋을 것 같습니다.

서문

저는 페이지를 작성할 때 flex 레이아웃을 많이 사용해왔는데 매우 유용하다고 생각합니다. 아래에 플렉스 레이아웃에 대한 좋은 소개가 첨부되어 있습니다.

Flex 레이아웃 튜토리얼에 대해 더 알고 싶으시면 이 블로그 게시물을 직접 읽어보시거나 Baidu에 방문하시면 됩니다. 여기서는 먼저 Flex의 호환성 문제에 대해 좀 더 알아보겠습니다. 공들여 나열한 것.

이유는 무엇입니까?

플렉스 레이아웃에 호환성 문제가 있는 이유는 무엇입니까?

호환성 문제가 발생하는 이유는 기술이 지속적으로 업데이트되기 때문입니다. 일부 오래된 브라우저에서는 오래된 구문 작성 방법만 지원하므로 소위 호환성 문제가 있습니다.

뭐?

그럼 구버전과 신버전은 뭔가요?

Flex 레이아웃은 이전 버전 표시: box;, 전환 버전 표시: flex box; 및 현재 표준 버전 표시: flex;로 나뉩니다. 따라서 구문 형식의 새 버전을 작성하면 호환성 문제가 분명히 발생합니다.

Android

2.3 이전 버전 지원 시작 display:-webkit-box;

4.4 지원 시작 표준 버전의 디스플레이: flex;

IOS

6.1에서는 이전 버전인 display:-webkit-box;
를 지원하기 시작합니다. 🎜>

7.1 표준 버전 디스플레이 지원 시작: flex;

PC

ie10에서 지원하기 시작했지만 IE10은 -ms 형식으로.

다음은 브라우저별 지원 현황입니다

어떻게 되나요?

그럼 호환성은 어떻게 써야 할까요?

상자 호환성 작성법

.box{
    display: -webkit-box;  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;     /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;  /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */
}

하위 요소 호환성 작성법

.flex1 {  
    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;     /* OLD - Firefox 19- */              
    -webkit-flex: 1;      /* Chrome */  
    -ms-flex: 1           /* IE 10 */  
    flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

이 호환 가능한 작성 방법이 반드시 작동하지 않을 수도 있습니다. 특히 Android 기본 버전에서는 더욱 그렇습니다. 왜 그렇습니까? 모든 것이 이전 버전과 호환되므로 쓰기 순서를 먼저 작성해야 작동합니다. 하단에 이전 구문을 작성하면 호환되지 않는 일부 모바일 설정만 이를 인식할 수 있습니다. 상자가 있는 것은 하단에 기재해야 합니다.

그래서 위의 호환 가능한 쓰기는 다음과 같아야 합니다.

.box{

    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   

 }

.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
}

위 내용은 CSS 시리즈 플렉스 호환성에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!