Flexbox — 한 줄로 레이아웃 잡기

이 토픽을 마치면

Flexbox의 핵심 속성을 이해하고, 가로/세로 정렬, 간격 조절을 자유롭게 할 수 있게 됩니다.

display: flex 한 줄이면

css

.container {
  display: flex;
}

이 한 줄만으로 자식 요소들이 가로로 나란히 배치됩니다. float이나 inline-block으로 고생하던 시절과 비교하면 혁명적입니다.

주축과 교차축

Flexbox에는 두 개의 축이 있습니다:

주축(main axis): 아이템이 배치되는 방향. 기본값은 가로(row). 교차축(cross axis): 주축과 수직인 방향. 기본값은 세로.

css

.container {
  display: flex;
  flex-direction: row;    /* 기본값: 가로 배치 */
  flex-direction: column; /* 세로 배치 */
}

flex-direction을 column으로 바꾸면 주축이 세로가 됩니다.

주축 정렬: justify-content

주축 방향으로 아이템을 어떻게 배치할지 결정합니다:

css

.container {
  display: flex;
  justify-content: flex-start;    /* 시작점 정렬 (기본값) */
  justify-content: center;        /* 가운데 정렬 */
  justify-content: flex-end;      /* 끝점 정렬 */
  justify-content: space-between; /* 양끝 붙이고 균등 배치 */
  justify-content: space-around;  /* 균등 배치 + 양끝 여백 */
}

space-between은 네비게이션 바에서 로고와 메뉴를 양쪽 끝에 배치할 때 자주 씁니다.

교차축 정렬: align-items

교차축 방향으로 아이템을 어떻게 배치할지 결정합니다:

css

.container {
  display: flex;
  align-items: stretch;    /* 컨테이너 높이에 맞춤 (기본값) */
  align-items: center;     /* 세로 가운데 */
  align-items: flex-start; /* 위 */
  align-items: flex-end;   /* 아래 */
}

가로세로 가운데 정렬:

css

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

이 3줄이면 완벽한 가운데 정렬입니다.

gap — 간격

css

.container {
  display: flex;
  gap: 16px;
}

아이템 사이의 간격을 지정합니다. 예전에는 margin으로 일일이 조정했지만, gap이면 한 줄로 해결됩니다. 마지막 아이템 뒤에 불필요한 margin이 생기지 않습니다.

flex-wrap — 줄 바꿈

css

.container {
  display: flex;
  flex-wrap: wrap;
}

기본적으로 Flex 아이템은 한 줄에 다 들어갑니다. 공간이 부족하면 아이템이 찌그러집니다. flex-wrap: wrap을 쓰면 공간이 부족할 때 다음 줄로 넘어갑니다. 카드 그리드를 만들 때 유용합니다.

flex: 1 — 남은 공간 채우기

css

.sidebar { width: 250px; }
.content { flex: 1; }

flex: 1은 남은 공간을 전부 차지합니다. 고정 너비 사이드바 옆에 유동적인 콘텐츠 영역을 만들 때 씁니다.

핵심

display: flex 한 줄이면 자식 요소가 가로로 나란히 배치됩니다. justify-content는 주축, align-items는 교차축 정렬입니다. gap으로 간격을, flex: 1로 남은 공간 채우기가 가능합니다.