Flexbox

Flexbox는 한 방향(가로 또는 세로)으로 요소를 배치하고 정렬하는 가장 편리한 도구입니다. 가운데 정렬, 균등 분배, 자동 줄바꿈 같은 작업을 몇 줄로 해결할 수 있습니다.

학습 목표

• display: flex와 주축/교차축 개념을 이해한다.
• justify-content, align-items로 정렬한다.
• flex-wrap과 gap으로 줄바꿈과 간격을 다룬다.
• flex-grow, flex-shrink, flex-basis로 자식 크기를 제어한다.

시작하기

부모에 display: flex를 주면 그 안의 직계 자식들이 가로로 나란히 배치됩니다.

.row {
  display: flex;
}

<div class="row">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

부모를 컨테이너, 자식을 아이템이라 부릅니다. 배치되는 기본 방향을 주축, 그에 수직인 방향을 교차축이라 합니다.

방향: flex-direction

.col {
  display: flex;
  flex-direction: column; /* 세로 배치 */
}

정렬: justify-content와 align-items

justify-content는 주축 방향, align-items는 교차축 방향 정렬입니다.

.center {
  display: flex;
  justify-content: center; /* 주축 가운데 */
  align-items: center;     /* 교차축 가운데 */
  height: 200px;
}

💡 TIP — 정확히 화면 정중앙에 무언가를 두고 싶다면 display: flex; justify-content: center; align-items: center; 세 줄이면 충분합니다.

줄바꿈과 간격

기본적으로 아이템은 한 줄에 욱여넣어집니다. flex-wrap: wrap을 쓰면 넘칠 때 다음 줄로 내려갑니다. gap은 아이템 사이 간격을 만듭니다.

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

자식 크기: flex-grow / shrink / basis

아이템의 크기는 세 속성으로 정합니다.

.item {
  flex-grow: 1;    /* 남는 공간을 차지하는 비율 */
  flex-shrink: 1;  /* 공간 부족 시 줄어드는 비율 */
  flex-basis: 0;   /* 기본 크기 */
}

/* 축약형 */
.item {
  flex: 1; /* grow 1, shrink 1, basis 0 */
}

flex: 1을 여러 아이템에 주면 남는 공간을 균등하게 나눠 가집니다.

⚠️ 주의 — flex-basis가 auto이면 아이템의 내용 크기가 기준이 됩니다. 균등 분배가 의도대로 되지 않으면 flex: 1 1 0처럼 basis를 0으로 두는지 확인하세요.

요약

• display: flex로 1차원 배치를 시작합니다.
• justify-content는 주축, align-items는 교차축 정렬입니다.
• flex-wrap으로 줄바꿈, gap으로 간격을 줍니다.
• flex: 1은 남는 공간을 균등 분배하는 가장 흔한 축약입니다.

연습문제

1. 자식 요소들을 한 줄에서 양 끝에 붙이고 사이를 균등하게 벌리려면 어떤 속성을 쓸까요?
2. 컨테이너 안의 요소를 가로·세로 모두 가운데 정렬하는 규칙을 작성하세요.
3. 카드들이 넘치면 다음 줄로 내려가고 사이 간격이 20px이 되도록 작성하세요.
4. 세 아이템이 남는 공간을 1:1:2 비율로 나눠 갖게 하려면 각 flex 값은?

힌트 — 주축 분배는 justify-content, 줄바꿈은 flex-wrap, 비율은 flex-grow 숫자입니다.