Flexbox ①

🎯 학습 목표

이 강을 마치면 여러분은 현대 웹 레이아웃의 핵심 도구인 Flexbox로 요소들을 한 줄로 정렬하고, 가로·세로 방향으로 자유롭게 배치할 수 있게 됩니다. 지금까지 배운 방법으로는 요소를 나란히 놓거나 가운데 두기가 번거로웠는데, Flexbox는 이것을 놀랍도록 쉽게 해결해 줍니다. 이번 강은 그 첫 부분으로, 컨테이너와 정렬의 기본을 다룹니다.

구체적으로는 세 가지를 배웁니다. 첫째, 플렉스 컨테이너를 만드는 display: flex와 방향을 이해합니다. 둘째, 주축 정렬 justify-content를 익힙니다. 셋째, 교차축 정렬 align-items를 살펴봅니다.

📦 플렉스 컨테이너 — display: flex

이 섹션에서는 Flexbox의 출발점인 플렉스 컨테이너를 살펴보겠습니다.

Flexbox는 여러 요소를 한 줄(1차원)로 정렬하는 배치 방식입니다. 사용법은 간단합니다. 정렬하고 싶은 요소들을 감싼 부모 요소에 display: flex를 주면 됩니다. 그러면 그 부모는 플렉스 컨테이너가 되고, 그 안의 자식들은 플렉스 아이템이 되어 가로로 나란히 정렬됩니다.

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

.container {
  display: flex;
}

여기서 놀라운 점이 있습니다. 14강에서 배웠듯 <div>는 블록 요소라서 원래는 세로로 쌓입니다. 그런데 부모에 display: flex 한 줄을 주는 것만으로 A·B·C가 가로로 나란히 놓입니다. 예전 같으면 inline-block 등으로 애써야 했던 가로 배치가, Flexbox로는 이렇게 단 한 줄로 해결됩니다. 이것이 Flexbox가 사랑받는 이유입니다.

🧭 두 개의 축 — 주축과 교차축

이 섹션에서는 Flexbox를 이해하는 핵심 개념인 두 개의 축을 살펴보겠습니다. 이것을 알아야 다음 정렬 속성들이 이해됩니다.

플렉스 컨테이너에는 두 개의 방향, 즉 축이 있습니다. 하나는 아이템이 나열되는 방향인 주축(main axis)이고, 다른 하나는 그와 수직인 방향인 교차축(cross axis)입니다. 기본 상태에서는 아이템이 가로로 나열되므로, 주축은 가로(→), 교차축은 세로(↓)입니다.

이 방향은 flex-direction 속성으로 바꿀 수 있습니다. 기본값은 row(가로 나열)이고, column으로 바꾸면 아이템이 세로로 나열됩니다.

.container {
  display: flex;
  flex-direction: column;
}

column으로 바꾸면 이번에는 주축이 세로가 되고 교차축이 가로가 됩니다. 즉 주축은 flex-direction이 가리키는 방향이고, 교차축은 그와 수직인 방향입니다. 왜 이 구분이 중요할까요? 다음에 배울 정렬 속성 두 개가 각각 주축과 교차축을 담당하기 때문입니다. 방향이 바뀌면 두 속성의 효과도 함께 바뀌므로, '주축·교차축'의 개념을 꼭 잡아 두어야 합니다.

↔️ 주축 정렬 — justify-content

이 섹션에서는 주축 방향의 정렬을 담당하는 justify-content를 살펴보겠습니다.

justify-content는 아이템들을 주축(기본은 가로)을 따라 어떻게 배치할지 정합니다. 자주 쓰는 값은 다음과 같습니다.

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

위 코드는 아이템들을 가로 가운데로 모읍니다. 특히 space-between은 실무에서 매우 유용합니다. 아이템들을 양 끝에 딱 붙이고 사이를 균등하게 벌리므로, 로고는 왼쪽 끝에 메뉴는 오른쪽 끝에 두는 헤더 배치 등에 안성맞춤입니다. justify-content 하나로 다양한 가로 배치를 손쉽게 만들 수 있습니다.

↕️ 교차축 정렬과 완벽한 가운데 — align-items

이 섹션에서는 교차축 정렬을 담당하는 align-items와, Flexbox의 가장 유명한 활용을 살펴보겠습니다.

align-items는 아이템들을 교차축(기본은 세로)을 따라 정렬합니다. 값으로 flex-start(위), center(가운데), flex-end(아래), 그리고 기본값인 stretch(교차축을 꽉 채워 늘림)가 있습니다.

이제 justify-content와 align-items를 함께 쓰면, 13강에서 margin: auto로는 못 했던 그 유명한 문제를 해결할 수 있습니다. 바로 요소를 가로·세로 모두 완벽하게 가운데 두는 것입니다.

.container {
  display: flex;
  justify-content: center;  /* 주축(가로) 가운데 */
  align-items: center;      /* 교차축(세로) 가운데 */
  height: 300px;
}

이 세 줄이면 컨테이너 안의 아이템이 정중앙에 놓입니다. justify-content: center가 가로 가운데를, align-items: center가 세로 가운데를 맡는 것입니다. 오랫동안 웹 개발자를 괴롭히던 '세로 가운데 정렬' 문제가, Flexbox 덕분에 이렇게 간단해졌습니다. 이 가운데 정렬 3종 세트는 정말 자주 쓰이니 통째로 외워 두면 두고두고 유용합니다.

⚠️ Flexbox를 다룰 때의 주의점

이 섹션에서는 흔한 실수를 정리하겠습니다.

첫 번째, 자식이 아니라 부모에 flex를 주는 것을 헷갈리는 것입니다. display: flex는 정렬하고 싶은 아이템들이 아니라, 그것을 감싼 부모(컨테이너)에 줍니다. 정렬이 안 된다면 flex를 엉뚱한 곳에 준 것은 아닌지 확인하세요.

두 번째, 주축·교차축이 방향에 따라 바뀌는 것을 잊는 것입니다. flex-direction을 column으로 바꾸면 justify-content가 세로를, align-items가 가로를 담당하게 됩니다. 정렬이 예상과 다르면 방향부터 확인하세요.

세 번째, justify-content와 align-items를 혼동하는 것입니다. justify는 주축, align은 교차축입니다. '가로·세로'로 외우기보다 '주축·교차축'으로 이해하면, 방향이 바뀌어도 헷갈리지 않습니다.

📝 핵심 요약

이번 강에서는 Flexbox의 기초를 배웠습니다.

• 플렉스 컨테이너 — 부모에 display: flex를 주면 자식들이 한 줄로 정렬됩니다. div도 가로로 나란히 놓입니다.
• 주축·교차축 — 아이템이 나열되는 방향이 주축, 그와 수직이 교차축입니다. flex-direction(row/column)으로 방향을 바꿉니다.
• justify-content — 주축 정렬을 담당하며 center·space-between 등으로 배치합니다.
• align-items — 교차축 정렬을 담당하며, justify-content: center와 함께 쓰면 완벽한 가운데 정렬이 됩니다.

Flexbox의 정렬 기초를 익혔습니다. 다음 강에서는 아이템의 크기가 유연하게 늘고 줄어드는 법, 줄바꿈, 간격 등 Flexbox의 더 강력한 기능을 이어서 배우겠습니다. 다음 강 「Flexbox ②」에서 이어가겠습니다.

📚 참고 자료

• Flexbox — MDN Web Docs
• justify-content — MDN Web Docs
• align-items — MDN Web Docs