웹사이트를 만들어 테스트 하는 중 IE에서만 발생하는 이슈입니다.
! 이슈사항
엘리먼트에 display: flex;를 사용한 경우 정렬을 위해 사용하는 align-items가 다른 브라우저는 잘 동작하나 Internet Explorer(IE) 11에서만 정상적으로 작동하지 않았습니다.
@ 원인원인을 확인해보니 IE에서는 세로 정렬을 위해 align-items를 사용하는 경우 반드시 height 값이 필요하다는 것을 알게되었습니다. 단 auto 이 외의 값을 가져야 합니다.
# IE에서 flex 세로 정렬 이슈 수정하기
먼저 다시 정리하면 다음과 같습니다.
1. IE에서 display: flex를 가지는 엘리먼트 이슈가 발생
2. 확인해보니 height 값은 없으며 min-height 값만 존해하였음
3. IE에서는 flex 레이아수의 vertical 정렬이 필요한 경우 height 값을 명시할 것
또한 위에서 말한 것 처럼 height값에 따라 동작에 차이가 있습니다. auto인 경우는 동작하지 않습니다.
( O ) 정상 동작함div {
display: flex;
align-items: center;
height: 0;
min-height: 600px;
}
아래 역시 잘 동작합니다. height 값을 px로 주었습니다.
div {
display: flex;
align-items: center;
height: 600px;
min-height: 600px;
}
다만 auto 값을 주는 경우 동작하지 않습니다.
( X ) 안됨div {
display: flex;
align-items: center;
height: auto;
min-height: 600px;
}
여기까지 IE에서 flex를 사용한 세로 정렬의 크로스 브라우징 방법을 알아봤습니다.