[크로스브라우징] Flex 쓰기 전에 알아두면 좋은 것들, 알려진 이슈

caniuse.com 에서 Flex를 검색하면 아래와 같은 내용을 확인할 수 있다.

거의 대부분의 브라우저에서 지원 가능하고 심지어 IE도 10과 11에서 부분 지원 되고 있다!

canius flex?

그치만... Notes 탭의 4번 항목을 보면 아래와 같은 말이 써있다.

 

Partial support is due to large amount of bugs present (see known issues)

 

엄청난 양의 버그가 있어서 부분적으로 지원한다는 멘트.

Known issues탭을 확인 해보면 이미 알려진 이슈들을 확인할 수 있다.

 

• Safari 10 이하 버전에서는 min/max width/height 선언을 사용하여 플렉스 아이템을 렌더링 하지만 멀티 라인 플렉스 컨테이너의 한 줄에 있어야 하는 항목 수를 계산할 때는 이러한 값을 무시한다. 이 경우 flex-basis 나 flex-basis 의 값이 auto로 설정해 간단히 해결 가능하다. 버그 참조 10 이상의 모든 버전에서 버그가 수정되었다.
• Safari 10.1 이하 버전에서 플렉스가 아닌 자손의 높이값은 퍼센트 단위로 인식되지 못한다. 그러나 다른 브라우저는 퍼센트 단위에 따라 항목을 인식하고 확장해준다. 10.1 버전 이상의 모든 버전에서 버그가 수정되었으며, 크롬에도 동일한 버그가 나타났으나 51 버전에서 수정되었다. 버그 참조
• IE 10 에서 flex 의 기본값은 최신 스펙에 정의된 0 1 auto 가 아니라 0 0 auto 이다.
• IE 11은 flex 를 사용할 때 세번째 인수인 flex-basis 를 필수로 사용해야한다. MSFT documentation 참조
• IE 11 은 min-height 를 사용할 때 항목을 수직 정렬이 올바르게 되지 않는 문제가 있다. 버그 참조
• IE10과 11에서 display: flex 와 flex-direction: column 이 선언된 컨테이너에 명시적인 height 값 외에 min-height 만 선언된 경우 하위 플렉스 아이템의 정확한 사이즈를 계산하지 못한다. 버그 참조
• CSS Box Alignment Module Level 3 에서 설명된 대로 justify-content 의 space-evenly 값은 일부 브라우저에서만 지원된다.
• Firefox 51 이하 버전에서 <button> 엘리먼트 안에 Flex가 들어가는것을 지원하지 않는다. 버그 참조. 버전 52에서 수정되었다.
• Flexbugs: 플렉스박스의 이슈와 크로스브라우징 이슈를 해결하기 위한 커뮤니티