flex-flow: column wrap 설정 시 플렉스 컨테이너 너비와 여백 문제 해결 방법

flex-flow: column wrap 적용 시 플렉스 컨테이너 레이아웃 정리

CSS Flexbox에서 컨테이너에 고정(fixed) 높이와 display: flex를 지정한 상태에서 자식 요소들을 세로(열) 방향으로 배치하고 싶다면 flex-flow 속성을 활용하면 됩니다. 이 글에서는 column wrap 적용 시 자주 마주치는 크롬 브라우저의 여백 문제와 그 해결 방법을 예제 코드와 함께 정리합니다.

1. flex-flow를 column wrap으로 설정하기

자식 항목들이 위에서 아래로 쌓이다가 컨테이너 높이를 초과하면 새로운 열(column)로 넘어가도록 만들려면 다음 속성을 추가합니다. 이렇게 하면 세로 공간이 부족할 때 항목들이 가로 방향으로 새 열을 만들며 배치됩니다.

-webkit-flex-flow: column wrap;
flex-flow: column wrap;

2. 크롬(Chrome)에서 상단 여백이 자동으로 생기는 문제

column wrap을 적용하면 크롬 브라우저에서 div(또는 li) 요소와 컨테이너 상단 테두리(border-top) 사이에 원치 않는 여백이 자동으로 삽입되는 경우가 있습니다. 이 자동 여백 없이 항목을 위쪽으로 붙이고 싶다면 각 아이템에 다음 속성을 적용합니다.

margin-bottom: 100%;

컨테이너 높이 기준 100%의 하단 마진을 부여하면 줄 바꿈 계산 과정에서 항목이 위로 당겨지면서 불필요한 여백이 사라지는 효과를 얻을 수 있습니다.

3. 전체 CSS 예제

.flex-container {
  position: fixed;
  height: 80%;            /* 플렉스 컨테이너 높이를 화면의 80%로 지정 */
  padding: 1px;
  margin: 1px;
  list-style: none;
  border: 7px solid red;  /* 테두리를 빨간색 실선으로 지정 */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

/* 요소를 눈으로 확인하기 위한 기본 스타일 */
body {
  margin: 0;
  padding: 0;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin-bottom: 100%;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

4. HTML 마크업

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

동작 원리 요약

flex-direction: column에서 wrap을 함께 사용하면 주축이 세로가 되고, 항목들이 컨테이너 높이를 초과할 때 교차축(가로) 방향으로 새로운 열이 생성됩니다. 따라서 컨테이너의 실제 콘텐츠 너비는 내부 열의 개수에 따라 늘어나게 되며, 이때 align-content와 justify-content 값을 조절해 열들의 정렬 위치를 원하는 대로 맞출 수 있습니다.

마무리

고정 높이의 플렉스 컨테이너에서 항목을 열 방향으로 배치하려면 flex-flow: column wrap을 사용하고, 크롬에서 자동으로 생기는 상단 여백은 자식 요소에 margin-bottom: 100%를 적용해 해결할 수 있습니다. 아울러 구형 브라우저와의 호환성을 위해 -webkit-, -ms- 등 벤더 프리픽스를 함께 작성해 두는 것이 안전합니다.