Flexbox 레이아웃

1. Flexbox란 무엇인가

Flexbox(Flexible Box Layout)는 1차원(가로 또는 세로 한 방향) 레이아웃을 쉽게 만드는 CSS 도구입니다. 내비게이션 바, 카드 목록, 버튼 그룹, 폼 정렬 등 대부분의 UI 구성에 활용됩니다.

<!-- HTML 구조 -->
<div class="container">   ← 부모: flex container
  <div class="item">1</div>  ← 자식: flex item
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* CSS */
.container {
  display: flex;   /* 이 한 줄이 모든 것을 바꾼다 */
}

display: flex를 선언하면 자식 요소들이 자동으로 가로로 나란히 배치됩니다. 이전에는 float이나 inline-block으로 복잡하게 처리하던 것을 Flexbox 하나로 해결합니다.

2. 주축과 교차축

flex-direction: row (기본값)
  주축(main axis): 가로 →
  교차축(cross axis): 세로 ↓

flex-direction: column
  주축(main axis): 세로 ↓
  교차축(cross axis): 가로 →

flex-direction: row-reverse    /* 가로 역방향 ← */
flex-direction: column-reverse /* 세로 역방향 ↑ */

3. justify-content — 주축 정렬

.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;  /*  ■  ■  ■  ■  완전 균등 */
}

4. align-items — 교차축 정렬

.container {
  display: flex;
  height: 200px;  /* 교차축 공간이 있어야 의미 있음 */

  align-items: stretch;     /* 높이 늘려 채움 (기본값) */
  align-items: flex-start;  /* 위쪽 정렬 */
  align-items: flex-end;    /* 아래쪽 정렬 */
  align-items: center;      /* 세로 중앙 정렬 ★ 가장 많이 사용 */
  align-items: baseline;    /* 텍스트 기준선 정렬 */
}

/* 완전 가운데 정렬 (수직+수평) */
.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

5. flex-wrap과 gap

/* flex-wrap: 아이템이 넘칠 때 줄바꿈 */
.container {
  display: flex;
  flex-wrap: nowrap;  /* 줄바꿈 없음 (기본) — 아이템 줄어들거나 넘침 */
  flex-wrap: wrap;    /* 넘치면 다음 줄로 */
  flex-wrap: wrap-reverse; /* 역방향 줄바꿈 */
}

/* gap: 아이템 사이 간격 */
.container {
  display: flex;
  gap: 16px;          /* 가로·세로 동일 */
  gap: 20px 12px;     /* 세로 20px, 가로 12px */
  row-gap: 20px;      /* 세로만 */
  column-gap: 12px;   /* 가로만 */
}
/* gap은 margin 대신 사용 — 첫/마지막 아이템에 불필요한 여백 없음 */

6. flex 아이템 크기 제어

/* flex-basis: 기본 크기 (width처럼 동작) */
.item { flex-basis: 200px; }
.item { flex-basis: 30%;   }
.item { flex-basis: auto;  } /* 내용 크기 기반 (기본값) */

/* flex-grow: 남은 공간 나눠 갖기 (비율) */
.item-a { flex-grow: 1; }  /* 남은 공간의 1/3 */
.item-b { flex-grow: 2; }  /* 남은 공간의 2/3 */

/* flex-shrink: 공간 부족 시 줄어드는 비율 */
.item { flex-shrink: 1; }  /* 기본값 — 비율대로 줄어듦 */
.item { flex-shrink: 0; }  /* 절대 줄어들지 않음 */

/* 단축형 flex: grow shrink basis */
.item { flex: 1; }          /* flex: 1 1 0 — 동일 비율로 채움 */
.item { flex: 0 0 200px; }  /* 크기 고정 */
.item { flex: 1 0 auto; }   /* 기본 크기 유지, 늘어남만 허용 */

/* 개별 아이템 정렬 덮어쓰기 */
.special { align-self: flex-end; }  /* 이 아이템만 아래 정렬 */

/* 순서 변경 */
.item:last-child { order: -1; } /* 맨 앞으로 이동 */

7. 실전 예제 — 네비게이션 바

<nav class="navbar">
  <div class="logo">My Site</div>
  <ul class="nav-links">
    <li><a href="/">홈</a></li>
    <li><a href="/about">소개</a></li>
    <li><a href="/contact">연락처</a></li>
  </ul>
  <button class="btn">로그인</button>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;  /* 로고 | 메뉴 | 버튼 좌우 배치 */
  align-items: center;             /* 세로 중앙 정렬 */
  padding: 16px 24px;
  background: #1e293b;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a { color: white; text-decoration: none; }

관련 검색어  ·  CSS Flexbox, justify-content, align-items, flex-wrap, flex-grow, CSS가운데정렬, 네비게이션CSS