Flexbox 레이아웃 마이그레이션 후기

배경

회사 서비스의 레이아웃 코드가 float와 clearfix로 도배되어 있었다. 반응형 작업을 할 때마다 미디어 쿼리가 복잡해지고, 수직 정렬 하나 하는데도 hack을 써야 하는 상황이 반복됐다. Flexbox 브라우저 지원율이 95%를 넘어선 시점이라 전환을 결정했다.

주요 작업 내용

가장 많이 사용한 패턴은 다음과 같았다.

/* Before */
.container:after {
  content: "";
  display: table;
  clear: both;
}
.item {
  float: left;
  width: 33.33%;
}

/* After */
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 0 0 33.33%;
}

수직 가운데 정렬도 훨씬 간단해졌다.

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

IE 이슈

IE10/11에서 flex-basis가 box-sizing을 무시하는 버그가 있었다. flex: 1 대신 명시적으로 flex: 1 1 0%로 작성해서 해결했다. 또한 min-height가 있는 flex container 내부의 아이템들이 제대로 늘어나지 않는 문제는 wrapper div를 하나 더 추가하는 방식으로 우회했다.

결과

CSS 라인 수가 약 30% 줄었고, 반응형 관련 버그 수정 시간이 체감상 절반으로 줄었다. autoprefixer를 webpack에 설정해서 vendor prefix는 자동으로 처리하도록 했다. 다만 팀원들이 Flexbox 속성에 익숙해지는 데 시간이 좀 걸렸다.