본문으로 건너뛰기
SoulLog

Flex와 Grid에 대한 정리

5분 읽기
CSSFlexboxFrontendIE11

Overview

Flex나 Grid에 대한 관심이 높아지면서, 실무에서 자주 마주치는 이슈들을 정리해보기로 했습니다. Promise, async/await도 중요하지만, Flex 레이아웃에 대해 다양하게 시도하고 공유하는 것도 의미가 있다고 생각합니다.

관련 예제 코드는 아래 저장소에서 확인할 수 있습니다.

W-hyacinth/flex-grid

Flex로 layout 잡을 시 유의사항

IE 10, IE 11에서의 대표적인 이슈들

1. min-width, min-height 미지원

IE 10, IE 11에서는 min-width, min-height 값이 적용되지 않습니다. 따라서 height로 직접 지정해야 합니다.

참고: philipwalton/flexbugs#3

2. calc 연산이 복잡한 경우 레이아웃 깨짐

IE 10에서 calc() 연산이 복잡한 경우, 특정 해상도에서 레이아웃이 유지되지 않는 문제가 발생할 수 있습니다. 복잡한 연산이 필요한 경우에는 직접 계산한 값을 지정하는 것이 안전합니다.

3. flex-flow: wrap column 미지원

IE 10, IE 11에서는 flex-flow: wrap column이 정상적으로 적용되지 않습니다. 모든 브라우저에서 동일하게 동작하도록 하려면 writing-mode 속성을 활용해야 합니다.

참고: philipwalton/flexbugs#14

flexbugs 문서에는 모든 브라우저의 공통 이슈라고 기재되어 있지만, 실제로 확인해본 결과 IE에서만 발생하는 버그였습니다.

아래는 flex-flow: wrap column과 동일한 레이아웃을 구현하기 위한 대안 코드입니다.

.flex-wrap {
  display: flex;
}
.rank {
  display: flex;
  width: 100%;
  flex-direction: column;
  counter-reset: section;
}
.rank li {
  display: flex;
  padding: 0.5% 0;
}
.rank li:before {
  width: 30px;
  flex: 0 0 auto;
  counter-increment: section;
  content: counter(section) '. ';
}
.rank li a {
  overflow: hidden;
  width: calc(100% - 30px);
  flex: 1 0 auto;
  font-weight: 700;
  color: #202429;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
  .rank {
    display: flex;
    flex-flow: wrap;
    height: 150px;
    /* width부터 -ms-writing-mode는 IE 10, IE 11 대응을 위한 속성 */
    width: 100%;
    flex: 1 0 auto;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
  }
  .rank li {
    width: 48.5%;
    margin: 0 0.5% 0 1%;
    padding: 0;
    align-items: center;
    flex: 0 0 auto;
    /* height부터 -ms-writing-mode는 IE 10, IE 11 대응을 위한 속성
       height 값이 없을 경우 특정 해상도에서 레이아웃 이슈 발생 */
    height: 20%;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
  }
}
<div class="flex-wrap">
  <ol class="rank">
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
    <li><a href="">Lorem ipsum dolor sit amet...</a></li>
  </ol>
</div>

4. Flex 요소 내 table-layout: fixed 버그

IE 10, IE 11에서 가변하는 flex 요소 내에 table 컨텐츠가 있고, 해당 테이블에 table-layout: fixed 속성이 적용되어 있을 경우, 테이블의 너비가 무한대로 늘어나는 버그가 있습니다. 이를 방지하려면 반드시 table을 감싸고 있는 가변 flex 요소에 width 값을 명시적으로 지정해야 합니다.

공통 사항

1. 텍스트 말줄임 처리 시 width 필요

텍스트 말줄임(text-overflow: ellipsis) 처리가 들어간 영역에는 width 값이 필요합니다. 말줄임뿐만 아니라 띄어쓰기 없이 긴 텍스트에 대한 대응을 위해서라도 해당 영역에 대한 width 값은 반드시 지정해야 합니다.

2. flex-basis와 width의 관계

flex-basis 값이 auto이고, width 값이 별도로 지정되어 있을 경우, flex-basis는 지정된 width 값을 기준으로 가져옵니다.

3. 세로 나열 후 열이 바뀌는 레이아웃

Flex가 아래와 같이 세로로 나열되다가 특정 수량에서 열이 바뀌는 레이아웃의 경우, 감싸고 있는 영역에 고정된 height 값이 있어야 정렬이 정상적으로 바뀝니다.

세로로 나열되다가 열이 바뀌는 레이아웃 예시