CSS / Flex / justify-content

Flexbox의 justify-content는 주축 방향에서 아이템 묶음을 정렬하거나 남는 공간을 아이템 사이와 주변에 분배하는 CSS 속성입니다. row에서는 보통 가로, column에서는 보통 세로 방향으로 동작하므로 먼저 flex-direction을 확인해야 합니다. 아이템이 공간을 이미 모두 채우면 값을 바꾸어도 정렬 차이가 보이지 않을 수 있습니다.

정렬 값과 공간 분배 값의 차이

현재 기본값은 normal이며 Flex 레이아웃에서는 주축 시작 쪽에 놓이는 동작을 합니다. 목적을 분명히 나타내려면 flex-start 등을 명시할 수 있습니다. 주축 시작은 고정된 왼쪽이 아니며 row-reverse에서는 기본 가로쓰기·ltr 조건에서 오른쪽이 됩니다.

center는 각 아이템의 가운데를 모두 같은 점에 겹치는 설정이 아닙니다. 아이템들을 묶어서 가운데로 옮깁니다. space-between도 컨테이너의 테두리에 직접 붙이는 뜻은 아니며, padding이 있으면 그 안쪽의 배치 공간을 기준으로 합니다.

전체 예제: 같은 크기의 아이템으로 여섯 값 비교

아래 코드를 justify-content.html로 저장한 뒤 브라우저에서 엽니다. 외부 파일은 필요하지 않습니다. 아이템은 각각 40px이고 늘어나지 않게 flex: none을 주었습니다. gap은 지정하지 않아 공간 분배 값 자체의 차이가 드러납니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>주축 정렬과 공간 분배 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    h2 { margin: 14px 0 6px; font-size: 16px; }
    .samples { max-width: 560px; }
    .box { display: flex; height: 56px; padding: 8px;
      border: 1px solid #84a3b7; background: #edf4f8; }
    .box > span { display: grid; place-items: center; flex: none;
      width: 40px; height: 32px; color: white; background: #176b86; }
    .flex-start { justify-content: flex-start; }
    .flex-end { justify-content: flex-end; }
    .center { justify-content: center; }
    .space-between { justify-content: space-between; }
    .space-around { justify-content: space-around; }
    .space-evenly { justify-content: space-evenly; }
  </style>
</head>
<body>
<h1>justify-content 비교</h1>
<div class="samples">
<h2>flex-start</h2>
<div class="box flex-start"><span>가</span><span>나</span><span>다</span></div>
<h2>flex-end</h2>
<div class="box flex-end"><span>가</span><span>나</span><span>다</span></div>
<h2>center</h2>
<div class="box center"><span>가</span><span>나</span><span>다</span></div>
<h2>space-between</h2>
<div class="box space-between"><span>가</span><span>나</span><span>다</span></div>
<h2>space-around</h2>
<div class="box space-around"><span>가</span><span>나</span><span>다</span></div>
<h2>space-evenly</h2>
<div class="box space-evenly"><span>가</span><span>나</span><span>다</span></div>
</div>
</body>
</html>

flex-start·flex-end·center는 아이템들이 서로 붙은 묶음의 위치만 바뀝니다. space-between은 내부 아이템 사이만 벌어지고, space-around는 양끝에도 여백이 생깁니다. space-evenly는 양끝 여백과 아이템 사이의 거리가 같습니다. 부모를 좁히면 분배할 공간도 함께 줄어듭니다.

첫 번째 규칙의 flex-start만 center로 바꾸어 묶음이 가운데로 이동하는지 확인하고 복원하세요. 이번에는 각 상자의 나·다 아이템을 제거해 한 개만 남겨 봅니다. space-between은 시작 쪽에, space-around와 space-evenly는 가운데에 놓이는 차이를 관찰할 수 있습니다. 비교 후 아이템을 복원합니다.

gap·자동 여백·flex-grow가 결과에 주는 영향

항목 사이에 항상 필요한 기본 간격은 gap으로 지정할 수 있습니다. 예제 .box에 gap: 12px를 추가하면 해당 간격을 먼저 확보한 뒤 남은 공간을 정렬·분배합니다. 따라서 gap이 있는 space-around의 실제 아이템 사이 간격은 양끝 여백의 정확한 두 배라고 단정할 수 없습니다. 확인 후 gap 선언을 제거합니다.

아이템에 flex-grow가 적용되어 남는 공간을 모두 소비하면 justify-content가 분배할 공간이 없어집니다. 예제의 flex: none을 flex: 1로 바꾸면 이 차이를 확인할 수 있습니다. center를 주었는데 양끝까지 차 보일 때는 아이템의 flex 설정을 먼저 확인하고, 실습 후 flex: none으로 복원하세요.

주축의 자동 여백도 justify-content보다 먼저 남는 공간을 사용합니다. 예를 들어 마지막 아이템의 margin-inline-start: auto는 가로쓰기 row 배치에서 앞의 아이템과 마지막 아이템을 양쪽으로 나누는 데 쓸 수 있습니다. 이 경우 center의 묶음 정렬과 다르게 보이는 것이 자연스럽습니다.

column의 세로 정렬과 효과가 안 보일 때

전체 예제의 .center 규칙에 아래 설정을 추가하면 같은 center가 세로 방향으로 동작합니다. 높이를 충분히 주어 아이템 합보다 남는 공간이 있어야 합니다. align-items는 이 조건에서 가로 방향의 교차축 정렬을 담당합니다.

.center {
  flex-direction: column;
  height: 240px;
  align-items: flex-start;
}

비교 후 추가한 세 선언을 지우면 원래 가로 정렬로 돌아갑니다. column 컨테이너의 높이가 내용 높이와 같다면 세로 가운데로 옮길 남는 공간이 없습니다. 컨테이너의 실제 높이와 아이템 크기·여백을 개발자 도구에서 확인하세요.

여러 줄의 Flex에서는 각 줄의 아이템을 주축 방향으로 정렬하며, 줄들 사이의 교차축 간격은 align-content의 역할입니다. 아이템 합이 컨테이너보다 큰 넘침 상황에서는 정상적인 양의 공간 분배와 조건이 다르므로 먼저 축소·줄바꿈·크기 제한을 검토하세요. Grid에도 같은 속성이 있지만 정렬 대상과 축의 정의가 다르므로 이 글의 Flex 예제와 구분해야 합니다.

값의 정의와 남는 공간의 처리 순서는 MDN justify-content 문서에서, 주축의 방향은 flex-direction 비교 예제에서 확인할 수 있습니다.