웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

IE 브라우저에서 flex 엘리먼트의 vertical 정렬(세로정렬)이 안되는 이슈

Last Modified : 2019-12-18 / Created : 2019-12-17
8,383
View Count
웹사이트를 만들어 테스트 하는 중 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를 사용한 세로 정렬의 크로스 브라우징 방법을 알아봤습니다.

Previous

로컬에 npm simplehttpserver 노드 패키지로 간단하게 웹서버 띄우기

Previous

웹스톰 vim 모드 끄는 방법