Frontend/CSS

CSS Flexbox 10분 완성: justify-content와 align-items 완벽 정리

미니임 2026. 2. 28. 20:42

 

웹 디자인을 하다 보면 요소를 가로로 나열하거나, 부모 요소의 정중앙에 배치해야 하는 상황이 빈번하게 발생합니다. 과거에는 float이나 table 속성을 활용해 복잡하게 구현했지만, 이제는 Flexbox 하나로 모든 것이 해결됩니다.

오늘은 Flexbox의 핵심 중의 핵심인 **메인축 정렬(justify-content)**과 **교차축 정렬(align-items)**을 다양한 예제와 함께 살펴보겠습니다.

1. Flexbox의 기본 구조: 부모와 자식

Flexbox를 사용하기 위해서는 정렬하고자 하는 요소들의 부모 바구니에 display: flex;를 선언하는 것부터 시작합니다.

  • Flex Container (부모): 정렬의 기준이 되는 영역
  • Flex Item (자식): 정렬되는 대상
.container {
  display: flex; /* Flexbox 활성화 */
}

2. 수평 정렬의 핵심: justify-content (메인축)

justify-content는 아이템들이 배치된 방향(기본값은 가로)을 기준으로 어떻게 간격을 나눌지 결정합니다.

주요 속성값 예시

  1. flex-start (기본값): 아이템들을 시작점으로 밀착시킵니다.
  2. flex-end: 아이템들을 끝점으로 밀착시킵니다.
  3. center: 아이템들을 중앙으로 모읍니다.
  4. space-between: 첫 번째와 마지막 아이템을 양 끝에 붙이고, 나머지는 일정한 간격으로 띄웁니다.
  5. space-around: 모든 아이템의 좌우에 동일한 여백을 둡니다. (아이템 간의 간격은 끝부분 간격의 2배가 됩니다.)

실무 예제: 내비게이션 바 만들기

로고는 왼쪽에, 메뉴 버튼들은 오른쪽에 배치하고 싶을 때 justify-content: space-between;을 사용하면 매우 편리합니다.

<!-- HTML -->
<nav class="navbar">
  <div class="logo">MyBrand</div>
  <ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

<!-- CSS -->
<style>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8f9fa;
}
.menu {
  display: flex;
  list-style: none;
  gap: 20px;
}
</style>

3. 수직 정렬의 핵심: align-items (교차축)

align-items는 아이템들이 배치된 방향의 반대 방향(기본값은 세로) 정렬을 담당합니다. 부모 요소의 높이가 정해져 있을 때 그 안에서 위, 아래, 중간 어디에 둘지를 결정합니다.

주요 속성값 예시

  1. stretch (기본값): 부모의 높이에 맞춰 아이템의 높이를 가득 채웁니다.
  2. flex-start: 아이템을 상단에 붙입니다.
  3. flex-end: 아이템을 하단에 붙입니다.
  4. center: 아이템을 세로 중앙에 배치합니다.
  5. baseline: 아이템 안의 글자(텍스트) 라인을 기준으로 정렬합니다.

실무 예제: 박스 안의 내용을 완벽하게 중앙 정렬하기

가장 많이 쓰이는 기법입니다. justify-content와 align-items를 모두 center로 주면 상하좌우 정중앙 배치가 끝납니다.

.hero-section {
  display: flex;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 */
  height: 400px;           /* 부모 높이가 있어야 세로 정렬이 눈에 보임 */
  background: linear-gradient(to right, #6a11cb, #2575fc);
  color: white;
}

4. 한눈에 보는 요약 표

속성대상기준대표적인 값

justify-content 메인축 (Main Axis) 주로 가로 방향 정렬 center, space-between, flex-end
align-items 교차축 (Cross Axis) 주로 세로 방향 정렬 center, stretch, flex-start

5. 연습해보기: 3개의 카드 레이아웃

아래는 3개의 카드를 일정한 간격으로 가로 배치하면서, 카드 내부의 아이콘과 텍스트를 세로 중앙 정렬하는 코드입니다.

<div class="card-container">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
</div>

<style>
.card-container {
  display: flex;
  justify-content: space-around; /* 카드 사이 간격을 일정하게 */
  padding: 50px;
  background-color: #eee;
}

.card {
  width: 100px;
  height: 150px;
  background-color: white;
  display: flex;
  align-items: center;     /* 카드 내부 텍스트 세로 중앙 */
  justify-content: center; /* 카드 내부 텍스트 가로 중앙 */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
</style>

Flexbox는 이론보다 직접 코드를 쳐보며 아이템들이 움직이는 것을 보는 것이 가장 빠르게 익히는 방법입니다. 위 예제 코드들을 복사해서 직접 수치를 바꿔보며 테스트해보세요!

반응형