Flexbox로 레이아웃 자유자재로 — 가로 배치부터 정렬까지

"왜 옆으로 안 붙지?"

HTML 요소들은 기본적으로 블록 요소가 위에서 아래로 쌓입니다. 그런데 실제 웹사이트를 보면 메뉴가 가로로 나열되거나, 카드들이 나란히 놓이거나, 버튼이 가운데 정렬되어 있습니다.

이것을 가능하게 하는 가장 편리한 도구가 Flexbox입니다.

Flexbox 시작하기

.container {
  display: flex;
}

딱 한 줄로 자식 요소들이 가로로 나란히 배치됩니다.

<div class="container">
  <div>아이템 1</div>
  <div>아이템 2</div>
  <div>아이템 3</div>
</div>

display: flex를 주면 .container는 Flex 컨테이너, 안의 div들은 Flex 아이템이 됩니다.

주축 방향 — `flex-direction`

.container {
  display: flex;
  flex-direction: row;         /* 기본값: 가로 (왼→오) */
  flex-direction: row-reverse; /* 가로 (오→왼) */
  flex-direction: column;      /* 세로 (위→아래) */
  flex-direction: column-reverse; /* 세로 (아래→위) */
}

주축 정렬 — `justify-content`

주축(flex-direction 방향)을 따라 아이템을 어떻게 배치할지 결정합니다.

.container {
  display: flex;
  justify-content: flex-start;    /* 기본: 왼쪽 정렬 */
  justify-content: flex-end;      /* 오른쪽 정렬 */
  justify-content: center;        /* 가운데 정렬 */
  justify-content: space-between; /* 양 끝 + 사이 균등 */
  justify-content: space-around;  /* 각 아이템 양쪽 균등 */
  justify-content: space-evenly;  /* 모든 간격 균등 */
}

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

교차축 정렬 — `align-items`

주축과 수직인 방향(교차축)을 따라 정렬합니다. flex-direction: row일 때는 세로 정렬.

.container {
  display: flex;
  align-items: stretch;     /* 기본: 컨테이너 높이만큼 늘림 */
  align-items: flex-start;  /* 위 정렬 */
  align-items: flex-end;    /* 아래 정렬 */
  align-items: center;      /* 세로 가운데 정렬 */
  align-items: baseline;    /* 텍스트 기준선 정렬 */
}

완전 가운데 정렬 (수평 + 수직)

.centered {
  display: flex;
  justify-content: center;  /* 수평 가운데 */
  align-items: center;      /* 수직 가운데 */
  height: 300px;
}

이 두 줄 조합은 로딩 스피너, 카드 아이콘, 빈 상태 화면 등에 아주 많이 씁니다.

간격 — `gap`

아이템 사이의 간격을 설정합니다. margin보다 편리합니다.

.container {
  display: flex;
  gap: 16px;           /* 모든 방향 16px */
  gap: 16px 24px;      /* 세로 16px, 가로 24px */
}

줄 바꿈 — `flex-wrap`

기본적으로 Flexbox는 아이템을 한 줄에 꾸겨 넣습니다. 줄 바꿈을 허용하려면:

.container {
  display: flex;
  flex-wrap: wrap;   /* 자동 줄 바꿈 */
  gap: 16px;
}

카드 그리드를 만들 때 유용합니다.

아이템 크기 — `flex`

.item {
  flex: 1;     /* 남은 공간을 동등하게 나눔 */
}

.sidebar {
  flex: 0 0 240px;  /* 고정 너비 240px */
}

.main {
  flex: 1;          /* 나머지 공간 모두 차지 */
}

실전 패턴들

패턴 1: 네비게이션 바

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  background-color: #1a1a2e;
}

.nav-logo {
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.nav-menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: white;
  text-decoration: none;
}

패턴 2: 카드 그리드

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 0 0 calc(33.333% - 14px);  /* 3열 */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
}

패턴 3: 2단 레이아웃

.layout {
  display: flex;
  gap: 24px;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex: 1;
}

직접 해보기 ✏️

아래 HTML 구조에 Flexbox를 적용해 보세요.

<nav>
  <div class="logo">🦊 BlueFox</div>
  <ul class="menu">
    <li><a href="#">홈</a></li>
    <li><a href="#">소개</a></li>
    <li><a href="#">연락처</a></li>
  </ul>
</nav>

<div class="cards">
  <div class="card">카드 1</div>
  <div class="card">카드 2</div>
  <div class="card">카드 3</div>
</div>

목표:

nav : 로고는 왼쪽, 메뉴는 오른쪽, 세로 가운데 정렬
menu : 메뉴 항목들이 가로로 나열, 간격 20px
cards : 카드 3개가 가로로 나열, 간격 16px

정리

속성	역할
`display: flex`	Flex 컨테이너로 전환
`flex-direction`	주축 방향 (row/column)
`justify-content`	주축 정렬
`align-items`	교차축 정렬
`gap`	아이템 간 간격
`flex-wrap: wrap`	줄 바꿈 허용
`flex: 1`	남은 공간 균등 분배

다음 편에서는 반응형 디자인(Responsive Design) — 스마트폰, 태블릿, PC에서 모두 잘 보이는 페이지 만들기를 배웁니다.

"왜 옆으로 안 붙지?"

Flexbox 시작하기

주축 방향 — flex-direction

주축 정렬 — justify-content

교차축 정렬 — align-items