[css] flex 세로 정렬 크로스 브라우징

보통 display: flex;를 가로 정렬을 위해서 사용한다.

또한 flex-direction 스타일의 default도 row;이다.

 

하지만 세로 정렬을 하되 전체 정중앙 정렬을 해야할 경우가 있다.

이럴땐 display: flex; 후에 flex-direction: column;를 추가해주면 되는데 문제는 크로스 브라우징이다.

 

사용자가 어떠한 브라우저를 사용할지는 모르는 일이라 모든 브라우저 상황을 고려해야한다.

 

flex 세로 정렬 크로스 브라우징 스타일은 다음과 같다.

.style {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
}