Flexbox로 복잡한 레이아웃 대체하기

문제 상황

레거시 프로젝트의 대시보드 레이아웃이 float과 clearfix, position absolute의 조합으로 되어 있었다. 반응형 지원을 위해 미디어 쿼리마다 position 값을 재조정해야 했고, CSS 파일이 500줄을 넘어갔다.

Flexbox 도입 결정

IE11까지 지원해야 하는 프로젝트였지만, Flexbox는 IE11에서도 prefix와 함께 사용 가능하다는 점을 확인했다. autoprefixer를 Webpack 빌드에 추가해 브라우저 호환성을 자동으로 처리하기로 했다.

적용 결과

기존 코드:

.dashboard {
  width: 100%;
}
.sidebar {
  float: left;
  width: 250px;
}
.main-content {
  margin-left: 250px;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

변경 후:

.dashboard {
  display: flex;
}
.sidebar {
  flex: 0 0 250px;
}
.main-content {
  flex: 1;
}

코드량이 절반 이하로 줄었고, 반응형 처리도 flex-direction: column으로 간단히 해결됐다.

주의사항

IE11에서 flex-basis가 제대로 동작하지 않는 경우가 있어, flex: 0 0 250px 대신 명시적으로 width를 함께 지정하는 편이 안전했다. 또한 min-height: 0 이슈로 자식 요소가 넘치는 문제가 있어 명시적인 높이 제한이 필요한 경우 추가 처리가 필요했다.

결론

Float 기반 레이아웃을 유지할 이유가 없다고 판단했다. 앞으로 신규 컴포넌트는 Flexbox를 기본으로 사용할 예정이다.