justify-content
flex 또는 grid 컨테이너에서 아이템을 주축(main axis) 방향으로 정렬하는 속성입니다. 반드시 df(display: flex) 또는 dg(display: grid)와 함께 사용해야 합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
jcfs | justify-content: flex-start | 아이템을 시작점에 정렬 (기본값) |
jcfe | justify-content: flex-end | 아이템을 끝점에 정렬 |
jcc | justify-content: center | 아이템을 가운데 정렬 |
jcsb | justify-content: space-between | 첫/끝 아이템은 양쪽 끝, 사이 간격 균등 |
jcsa | justify-content: space-around | 각 아이템 양쪽에 동일 간격 (가장자리 절반) |
jcse | justify-content: space-evenly | 가장자리 포함 모든 간격 완전 균등 |
시각적 비교
각 justify-content 값이 아이템 배치에 어떤 영향을 주는지 비교합니다.
flex-start — jcfs
flex-end — jcfe
center — jcc
space-between — jcsb
space-around — jcsa
space-evenly — jcse
space-between vs space-around vs space-evenly
세 가지 space 계열 값의 간격 차이를 비교합니다. 컨테이너 테두리와 아이템 사이의 공간에 주목하세요.
space-between — jcsb
양쪽 끝에 붙고, 사이 간격만 균등
space-around — jcsa
각 아이템 양쪽에 동일 간격 (가장자리는 절반)
space-evenly — jcse
가장자리 포함 모든 간격이 완전 균등
언제 뭘 쓸까?
| 상황 | 추천 | 이유 |
|---|---|---|
| 콘텐츠 가운데 정렬 | jcc | 가장 직관적인 센터 정렬 |
| 헤더 로고 + 네비게이션 | jcsb | 양쪽 끝 정렬로 자연스러운 헤더 구성 |
| 균등한 간격의 탭/아이콘 | jcse | 가장자리 포함 완전 균등 간격 |
| 버튼을 오른쪽 정렬 | jcfe | 끝점으로 몰아서 우측 정렬 |
| 기본 좌측 정렬 (되돌리기) | jcfs | 반응형에서 다른 정렬을 초기화 |
| 약간의 여백이 있는 균등 배치 | jcsa | 가장자리에 절반 간격 유지 |
클래스별 상세
jcfsjustify-content: flex-start
아이템을 주축의 시작점에 모아 배치합니다. flex 컨테이너의 기본값이므로 명시적으로 지정할 필요가 적지만, 반응형에서 다른 정렬을 되돌릴 때 사용합니다.
<!-- 네비게이션 좌측 정렬 -->
<nav class="df jcfs aic gap2rem py16px">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<!-- 반응형: 데스크탑 센터 → 태블릿 좌측 -->
<div class="df jcc md-jcfs gap16px">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>jcfejustify-content: flex-end
아이템을 주축의 끝점에 모아 배치합니다. 버튼을 오른쪽 정렬하거나, 푸터 요소를 끝으로 밀 때 사용합니다.
<!-- 버튼 그룹 오른쪽 정렬 -->
<div class="df jcfe aic gap12px p2rem">
<button class="py8px px16px bg27272A cFAFAFA br8px bn cp">취소</button>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">확인</button>
</div>
<!-- 카드 하단 액션 영역 -->
<div class="df jcfe aic gap8px pt16px bt1pxsolid27272A">
<span class="fs12px c71717A">편집</span>
<span class="fs12px c71717A">삭제</span>
</div>jccjustify-content: center
아이템을 주축의 가운데에 배치합니다. 콘텐츠 센터 정렬, 모달 내부 정렬, CTA 버튼 그룹 등에 가장 많이 사용됩니다. aic와 함께 사용하면 완전한 가운데 정렬이 됩니다.
<!-- 완전한 가운데 정렬 -->
<div class="df jcc aic h100vh">
<div class="p4rem bg18181B br8px tac">
<h2 class="fs2rem fw700 cFAFAFA mb8px">환영합니다</h2>
<p class="fs14px c71717A">가운데 정렬된 콘텐츠</p>
</div>
</div>
<!-- CTA 버튼 그룹 -->
<div class="df jcc gap16px mt2rem">
<button class="py12px px2-4rem bg6366F1 cFFFFFF br8px bn cp">시작하기</button>
<button class="py12px px2-4rem bg27272A cFAFAFA br8px bn cp">더 알아보기</button>
</div>jcsbjustify-content: space-between
첫 번째 아이템은 시작점에, 마지막 아이템은 끝점에 배치하고 나머지 간격을 균등하게 분배합니다. 헤더의 로고와 네비게이션, 카드 하단의 가격과 버튼 등 양쪽 끝 정렬에 가장 많이 사용됩니다.
<!-- 헤더: 로고 + 네비게이션 -->
<header class="df jcsb aic px2rem py16px">
<div class="fs2rem fw700 cFAFAFA">Logo</div>
<nav class="df gap2rem">
<a href="#" class="c71717A tdn">Home</a>
<a href="#" class="c71717A tdn">About</a>
<a href="#" class="c71717A tdn">Contact</a>
</nav>
</header>
<!-- 카드 하단: 가격 + 구매 버튼 -->
<div class="df jcsb aic pt16px bt1pxsolid27272A">
<span class="fs2rem fw700 cFAFAFA">₩29,000</span>
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">구매</button>
</div>2개 아이템 팁
jcsb에 아이템이 2개만 있으면 자연스럽게 좌우 끝 정렬이 됩니다. 헤더의 로고+메뉴 패턴에 가장 많이 활용됩니다.
jcsajustify-content: space-around
각 아이템의 양쪽에 동일한 간격을 부여합니다. 가장자리 간격은 아이템 사이 간격의 절반이 됩니다. 탭 메뉴, 아이콘 그룹 등에 사용합니다.
<!-- 탭 메뉴 -->
<div class="df jcsa aic bb1pxsolid27272A">
<button class="py12px px16px cFAFAFA bn bg0F0F17 cp bb2pxsolid6366F1">전체</button>
<button class="py12px px16px c71717A bn bg0F0F17 cp">인기</button>
<button class="py12px px16px c71717A bn bg0F0F17 cp">최신</button>
<button class="py12px px16px c71717A bn bg0F0F17 cp">추천</button>
</div>
<!-- 아이콘 그룹 -->
<div class="df jcsa aic py2rem">
<div class="tac">
<div class="fs2-4rem mb4px">📦</div>
<span class="fs12px c71717A">배송</span>
</div>
<div class="tac">
<div class="fs2-4rem mb4px">🔒</div>
<span class="fs12px c71717A">보안</span>
</div>
<div class="tac">
<div class="fs2-4rem mb4px">💬</div>
<span class="fs12px c71717A">지원</span>
</div>
</div>jcsejustify-content: space-evenly
가장자리를 포함하여 모든 간격을 완전히 균등하게 분배합니다. 가장 균일한 간격이 필요할 때 사용합니다. 대시보드 통계 카드, 하단 네비게이션 등에 적합합니다.
<!-- 대시보드 통계 카드 -->
<div class="df jcse aic py2-4rem">
<div class="tac">
<p class="fs2-4rem fw700 cFAFAFA">1,234</p>
<p class="fs12px c71717A mt4px">사용자</p>
</div>
<div class="tac">
<p class="fs2-4rem fw700 cFAFAFA">567</p>
<p class="fs12px c71717A mt4px">주문</p>
</div>
<div class="tac">
<p class="fs2-4rem fw700 cFAFAFA">89%</p>
<p class="fs12px c71717A mt4px">만족도</p>
</div>
</div>
<!-- 하단 네비게이션 (모바일) -->
<nav class="df jcse aic py12px bg18181B bt1pxsolid27272A">
<a href="#" class="tac tdn c71717A">
<div class="fs2rem">🏠</div>
<span class="fs12px">홈</span>
</a>
<a href="#" class="tac tdn c71717A">
<div class="fs2rem">🔍</div>
<span class="fs12px">검색</span>
</a>
<a href="#" class="tac tdn c71717A">
<div class="fs2rem">👤</div>
<span class="fs12px">프로필</span>
</a>
</nav>반응형
미디어 쿼리 프리픽스와 조합하면 화면 크기에 따라 정렬 방식을 변경할 수 있습니다.
<!-- 데스크탑 센터 → 태블릿 이하 좌측 정렬 -->
<div class="df jcc md-jcfs gap16px">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</div>
<!-- 데스크탑 space-between → 모바일 센터 -->
<div class="df jcsb sm-jcc gap16px">
<span>Logo</span>
<span>Menu</span>
</div>| 클래스 조합 | 동작 |
|---|---|
df jcc md-jcfs | 기본 센터 → 1024px 이하에서 좌측 정렬 |
df jcsb sm-jcc | 기본 양쪽 끝 → 768px 이하에서 센터 |
df jcfs lg-jcc | 기본 좌측 → 1280px 이하에서 센터 |
df jcse sm-jcsb | 기본 균등 → 768px 이하에서 space-between |
df jcc md-jcfe | 기본 센터 → 1024px 이하에서 우측 정렬 |
팁 & 주의사항
주축 방향에 따라 달라짐
justify-content는 주축(main axis) 방향으로 작용합니다. fdr(기본값)에서는 수평, fdc에서는 수직 방향으로 정렬합니다.
교차축은 align-items
교차축(cross axis) 정렬은 aic, aifs, aife 등 align-items 클래스를 사용하세요.
jcsb + 아이템 2개 = 좌우 정렬
jcsb에 아이템이 2개만 있으면 하나는 왼쪽 끝, 하나는 오른쪽 끝에 배치됩니다. 헤더의 로고+메뉴 패턴에 최적입니다.
flex와 grid 모두 지원
justify-content는 df(flex)뿐 아니라 dg(grid) 컨테이너에서도 동일하게 작동합니다.