[CSS] 최신 flex 호환성 이슈 해결 방법

nemo·2021년 12월 22일
6

CSS

목록 보기
1/5

현재 대부분 브라우저에서 flex가 지원된다. 하지만 아직은 접두사를 사용하여야 지원이 되는 경우도 있고, IE처럼 아직도 완벽하게 지원되지 않는 경우도 있다. 크로스 브라우징을 위해 flex 호환성 이슈 해결 방법에 대해 알아보자.

Can I use Flex?

Can-I-use-flex

명세에도 적혀있듯이 아래 명시된 버전의 각 브라우저들은 prefix, 즉 접두사를 통해 호환성을 해결하여야 한다.

브라우저 버전 접두사
IE 10 -ms-
Firefox 2~21 -moz-
Chrome 4~28 -webkit-
Safari 3.1~8 -webkit-
Safari on iOS 3.1~8.4 -webkit-
Android Browser 2.1~4.3 -webkit-
Opera 15~16 -webkit-

IE10 이하 버전에서는 flex를 지원하지 않는다.

flex-flow align-self, align-content, justify-content: space-around 는 Android Browser 2.1~4.3 버전과 IE 10 둘 다 공통적으로 지원하지 않는다.

flex-grow, flex-basis는 IE 10에서 지원하지 않으며 단축 속성인 -ms-flex: 0 1 auto를 사용해야 한다.



호환성 이슈 해결

접두사를 사용하지 않은 기본 형태를 가장 마지막에 둔다.

.container {
    /* (기본필수) flex container 생성 */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    /* 주축을 행(row)으로 설정 */
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    /* 주축을 열(column)로 설정 */
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    /* row-reverse */
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;

    /* column-reverse */
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;

    /* 줄바꿈 방지 */
    -webkit-box-lines: single;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    /* 줄바꿈 (Android 2.1~4.3 이하 지원 X) */ 
    -webkit-box-lines: multiple;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    /* [정렬] 주축 - 시작점 기준 */
    -webkit-box-pack: start;
    -moz-box-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    /* [정렬] 주축 - 끝점 기준 */
    -webkit-box-pack: end;
    -moz-box-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;

    /* [정렬] 주축 - 가운데 기준 */
    -webkit-box-pack: center;
    -moz-box-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    /* [정렬] space-between */
    -webkit-box-pack: justify;
    -moz-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;

    /* [정렬] 교차축 - 시작점 기준 */
    -webkit-box-align: start;
    -moz-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;

    /* [정렬] 교차축 - 끝점 기준 */
    -webkit-box-align: end;
    -moz-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;

    /* [정렬] 교차축 - 가운데 기준 */
    -webkit-box-align: center;
    -moz-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    /* [정렬] 교차축 - stretch */
    -webkit-box-align: stretch;
    -moz-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    /* [정렬] 교차축 - baseline */
    -webkit-box-align: baseline;
    -moz-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.item {
    /* 확장 지수 설정 */
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex-grow: 1;

    /* 아이템 정렬 순서 (Android 2.1~4.3 이하 지원 X) */
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
}

0개의 댓글