[CSS] IE 대응을 위해 flex-basis에 width & max-width 함께 넣기

• (2022년 03월 16일 수정) IE 대응 관련 내용 추가

IE11(IE: Internet Explorer, 인터넷 익스플로러)은 여전히 국내 많은 조직에서 호환성을 맞춰야 하는 브라우저입니다. 다행히도 flexbox는 부분적이지만 IE11에서 사용이 가능합니다. 일부 기능들이 사용이 불가능하거나, 깨져서 표현되지만 일부 기능의 경우 다른 CSS 속성을 함께 기재함으로써 깨지는 현상을 해소할 수도 있습니다. 이 포스트에서는 flex-basis를 사용할 때 IE11에서도 정상적으로 표현이 가능한 방법에 대해 알아보고자 합니다. 

1. flex-basis: 0는 width: 100%(채울 때) 또는 width: auto(랩핑할 때)를 함께 삽입

flex-grow를 활용하여 flex-basis를 0으로 할당함으로써 너비가 자동으로 채워지는 flex item을 만드는 경우 또는 콘텐츠를 랩핑하는 경우가 많은데, 그냥 사용하면 IE에서는 width를 0으로 인식하여 아무 것도 랜더링이 되지 않습니다. 이 때 flex-grow 등을 활용해서 공간을 채우는 기능을 하는 요소의 경우 width: 100%를 함께 기재함으로써 IE11에서도 정상적으로 flexbox가 표현되도록 할 수 있습니다. flex-grow를 사용하지 않고 랩핑하는 용도로만 쓰는 경우에는 width: auto를 함께 적용하여 IE11에서 정상 표시가 가능하도록 할 수 있습니다. 너비에 대해서 테스트를 진행하였으나, 높이에 대해서도 같은 방식으로 대응이 가능할 것으로 보입니다. flex-basis를 활용해 flex를 구성할 때는 fallback 스타일링 옵션으로서 width: 100%, width: auto을 함께 기재하는 것도 좋은 코딩 컨밴션이 아닐까 싶습니다.

 

.flexbox {
	flex-basis: 0;
	width: 100%;
}

.flexbox {
	flex-basis: 0;
	width: auto;
}

 

.flex {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

.flex .flex-item {
    flex: 1 0 0;
    background: red;
    width: 100%;
}

.flex .flex-item:nth-child(1) {
    flex: 0 0 0;
    background: blue;
    width: auto;
}

 

 

2. flex-basis를 고정값으로 설정할 때는 width도 같이 고정값을 입력

flex-basis를 특정 px 고정값으로 입력할 때는 width도 함께 고정값을 입력해 주는 것이 좋습니다.

 

.flexbox {
	flex-basis: 100px;
	width: 100px;
}

 

3. flex-basis를 100%로 할당할 때에는 max-width도 함께 입력

flex-basis를 100%로 값을 입력할 때에는 최대 너비값에 대한 제한도 함께 해 주어야 IE에서 정상적으로 표시가 됩니다.

 

.flexbox {
	flex-basis: 100%;
	max-width: 100%;
}

 

4. flex-basis를 auto로 할당할 때에는 width도 함께 입력

flex-basis를 auto로 입력할 때에는 width도 함께 auto로 할당하여 IE가 잘못 명령을 이해하는 것을 방지하도록 합니다.

 

.flexbox {
	flex-basis: auto;
	width: auto;
}

 

5. 밀도 높은 IE 대응을 위해서 flex-basis를 쓰는 경우에는 width, max-width 함께 정의

다소 무식한(?) 방법이지만, IE 대응이 중요시되는 프로젝트의 경우에는 코드가 다소 길어질 수 있지만 width, max-width를 함께 정의하는 것도 방법일 수 있습니다.

 

.flexbox {
	flex-basis: 0;
	width: 100%;
	max-width: 100%;
}

.flexbox {
	flex-basis: 100px;
	width: 100px;
	max-width: 100px;
}

.flexbox {
	flex-basis: 100%;
	width: 100%;
	max-width: 100%;
}

.flexbox {
	flex-basis: auto;
	width: auto;
	max-width: none;
}