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

현재 대부분 브라우저에서 flex가 지원된다. 하지만 아직은 접두사를 사용하여야 지원이 되는 경우도 있고, IE처럼 아직도 완벽하게 지원되지 않는 경우도 있다. 크로스 브라우징을 위해 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;
}