CSS Flexbox 정리

웹 레이아웃을 구성할 때 가장 많이 사용하는 방식 중 하나가 Flexbox(Flexible Box Layout) 입니다. Flexbox는 요소들을 가로나 세로 방향으로 자유롭게 배치하고 정렬할 수 있는 강력한 도구로, 반응형 디자인 구현에도 매우 유용합니다.

1. 기본 개념

Flexbox는 부모 요소(Container) 와 자식 요소(Item) 의 관계로 동작합니다.

• 부모 요소에 display: flex;를 지정하면, 자식 요소들이 Flexbox 규칙을 따르게 됩니다.
• 축(axes) 개념을 이해하는 것이 중요합니다.
  • 메인 축(Main Axis): 아이템이 배치되는 주 축 (기본은 가로 방향)
  • 교차 축(Cross Axis): 메인 축과 직각을 이루는 축 (기본은 세로 방향)

2. 부모(Container) 속성

display

.container {
  display: flex;      /* 블록 레벨 flexbox */
  display: inline-flex; /* 인라인 레벨 flexbox */
}

flex-direction (배치 방향)

• row (기본값): 가로 배치 (왼 → 오)
• row-reverse: 가로 배치 (오 → 왼)
• column: 세로 배치 (위 → 아래)
• column-reverse: 세로 배치 (아래 → 위)

.container {
  flex-direction: row;
}

justify-content (메인 축 정렬)

• flex-start (기본값): 시작점 정렬
• flex-end: 끝점 정렬
• center: 가운데 정렬
• space-between: 아이템 사이 동일 간격
• space-around: 양쪽 여백 포함 간격
• space-evenly: 모든 간격 동일

.container {
  justify-content: space-between;
}

align-items (교차 축 정렬)

• stretch (기본값): 교차축 크기 늘려 맞춤
• flex-start: 위쪽 정렬
• flex-end: 아래쪽 정렬
• center: 가운데 정렬
• baseline: 텍스트 기준선 맞춤

.container {
  align-items: center;
}

align-content (여러 줄 정렬)

• flex-wrap: wrap; 상태에서만 적용
• flex-start, flex-end, center, space-between, space-around, stretch

.container {
  flex-wrap: wrap;
  align-content: space-around;
}

flex-wrap (줄바꿈)

• nowrap (기본값): 한 줄에 모두 배치
• wrap: 공간이 부족하면 줄바꿈
• wrap-reverse: 줄바꿈 + 역순

.container {
  flex-wrap: wrap;
}

3. 자식(Item) 속성

flex (단축 속성)

flex: grow shrink basis;

• grow: 남는 공간 비율 (기본값 0)
• shrink: 공간 부족 시 줄어드는 비율 (기본값 1)
• basis: 기본 크기 (px, %, auto 등)

.item {
  flex: 1; /* grow:1, shrink:1, basis:0% */
}

align-self

• 개별 아이템만 교차축 정렬 변경 가능
• auto, flex-start, flex-end, center, baseline, stretch

.item {
  align-self: flex-end;
}

order

• 아이템의 배치 순서 변경 (기본값 0)
• 숫자가 작을수록 먼저 배치

.item {
  order: 2;
}

4. 예제 코드

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 200px;
  background: #f0f0f0;
}

.item {
  flex: 1;
  padding: 20px;
  background: #4caf50;
  color: white;
  text-align: center;
}

마무리

Flexbox는 기존 float나 table 기반 레이아웃보다 훨씬 직관적이며 강력합니다.

• justify-content → 메인 축 정렬
• align-items → 교차 축 정렬
• flex → 아이템 크기 비율 제어

이 세 가지를 이해하면 대부분의 웹 레이아웃을 손쉽게 구현할 수 있습니다.