justify-content

flex 또는 grid 컨테이너에서 아이템을 주축(main axis) 방향으로 정렬하는 속성입니다. 반드시 df(display: flex) 또는 dg(display: grid)와 함께 사용해야 합니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	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

ABC

flex-end — jcfe

ABC

center — jcc

ABC

space-between — jcsb

ABC

space-around — jcsa

ABC

space-evenly — jcse

ABC

space-between vs space-around vs space-evenly

세 가지 space 계열 값의 간격 차이를 비교합니다. 컨테이너 테두리와 아이템 사이의 공간에 주목하세요.

space-between — jcsb

ABC

양쪽 끝에 붙고, 사이 간격만 균등

space-around — jcsa

ABC

각 아이템 양쪽에 동일 간격 (가장자리는 절반)

space-evenly — jcse

ABC

가장자리 포함 모든 간격이 완전 균등

언제 뭘 쓸까?

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황	추천	이유
Center content	`jcc`	Most intuitive center alignment
Header logo + navigation	`jcsb`	Natural header with edge alignment
Evenly spaced tabs/icons	`jcse`	Fully equal spacing including edges
Right-align buttons	`jcfe`	Push to end for right alignment
Default left alignment (reset)	`jcfs`	Reset other alignments in responsive
Equal distribution with margins	`jcsa`	Half spacing at edges

클래스별 상세

`jcfs`justify-content: flex-start

아이템을 주축의 시작점에 모아 배치합니다. flex 컨테이너의 기본값이므로 명시적으로 지정할 필요가 적지만, 반응형에서 다른 정렬을 되돌릴 때 사용합니다.

<!-- Navigation Left aligned -->
<nav class="df jcfs aic gap2rem py16px">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<!-- Responsive: Desktop center, Tablet left -->
<div class="df jcc md-jcfs gap16px">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

`jcfe`justify-content: flex-end

아이템을 주축의 끝점에 모아 배치합니다. 버튼을 오른쪽 정렬하거나, 푸터 요소를 끝으로 밀 때 사용합니다.

<!-- Button group Right aligned -->
<div class="df jcfe aic gap12px p2rem">
  <button class="py8px px16px bg27272A cFAFAFA br8px bn cp">Cancel</button>
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Confirm</button>
</div>

<!-- Card bottom action area -->
<div class="df jcfe aic gap8px pt16px bt1pxsolid27272A">
  <span class="fs12px c71717A">Edit</span>
  <span class="fs12px c71717A">Delete</span>
</div>

`jcc`justify-content: center

아이템을 주축의 가운데에 배치합니다. 콘텐츠 센터 정렬, 모달 내부 정렬, CTA 버튼 그룹 등에 가장 많이 사용됩니다. aic와 함께 사용하면 완전한 가운데 정렬이 됩니다.

<!-- Fully center aligned -->
<div class="df jcc aic h100vh">
  <div class="p4rem bg18181B br8px tac">
    <h2 class="fs2rem fw700 cFAFAFA mb8px">Welcome</h2>
    <p class="fs14px c71717A">Center aligned content</p>
  </div>
</div>

<!-- CTA Button group -->
<div class="df jcc gap16px mt2rem">
  <button class="py12px px2-4rem bg6366F1 cFFFFFF br8px bn cp">Get Started</button>
  <button class="py12px px2-4rem bg27272A cFAFAFA br8px bn cp">Learn More</button>
</div>

`jcsb`justify-content: space-between

첫 번째 아이템은 시작점에, 마지막 아이템은 끝점에 배치하고 나머지 간격을 균등하게 분배합니다. 헤더의 로고와 네비게이션, 카드 하단의 가격과 버튼 등 양쪽 끝 정렬에 가장 많이 사용됩니다.

<!-- Header: Logo + Navigation -->
<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>

<!-- Card bottom: price + buy button -->
<div class="df jcsb aic pt16px bt1pxsolid27272A">
  <span class="fs2rem fw700 cFAFAFA">$29.00</span>
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Buy</button>
</div>

2개 아이템 팁

jcsb에 아이템이 2개만 있으면 자연스럽게 좌우 끝 정렬이 됩니다. 헤더의 로고+메뉴 패턴에 가장 많이 활용됩니다.

`jcsa`justify-content: space-around

각 아이템의 양쪽에 동일한 간격을 부여합니다. 가장자리 간격은 아이템 사이 간격의 절반이 됩니다. 탭 메뉴, 아이콘 그룹 등에 사용합니다.

<!-- Tab menu -->
<div class="df jcsa aic bb1pxsolid27272A">
  <button class="py12px px16px cFAFAFA bn bg0F0F17 cp bb2pxsolid6366F1">All</button>
  <button class="py12px px16px c71717A bn bg0F0F17 cp">Popular</button>
  <button class="py12px px16px c71717A bn bg0F0F17 cp">Latest</button>
  <button class="py12px px16px c71717A bn bg0F0F17 cp">Featured</button>
</div>

<!-- Icon group -->
<div class="df jcsa aic py2rem">
  <div class="tac">
    <div class="fs2-4rem mb4px">📦</div>
    <span class="fs12px c71717A">Shipping</span>
  </div>
  <div class="tac">
    <div class="fs2-4rem mb4px">🔒</div>
    <span class="fs12px c71717A">Security</span>
  </div>
  <div class="tac">
    <div class="fs2-4rem mb4px">💬</div>
    <span class="fs12px c71717A">Support</span>
  </div>
</div>

`jcse`justify-content: space-evenly

가장자리를 포함하여 모든 간격을 완전히 균등하게 분배합니다. 가장 균일한 간격이 필요할 때 사용합니다. 대시보드 통계 카드, 하단 네비게이션 등에 적합합니다.

<!-- Dashboard stat cards -->
<div class="df jcse aic py2-4rem">
  <div class="tac">
    <p class="fs2-4rem fw700 cFAFAFA">1,234</p>
    <p class="fs12px c71717A mt4px">Users</p>
  </div>
  <div class="tac">
    <p class="fs2-4rem fw700 cFAFAFA">567</p>
    <p class="fs12px c71717A mt4px">Orders</p>
  </div>
  <div class="tac">
    <p class="fs2-4rem fw700 cFAFAFA">89%</p>
    <p class="fs12px c71717A mt4px">Satisfaction</p>
  </div>
</div>

<!-- Bottom navigation (mobile) -->
<nav class="df jcse aic py12px bg18181B bt1pxsolid27272A">
  <a href="#" class="tac tdn c71717A">
    <div class="fs2rem">🏠</div>
    <span class="fs12px">Home</span>
  </a>
  <a href="#" class="tac tdn c71717A">
    <div class="fs2rem">🔍</div>
    <span class="fs12px">Search</span>
  </a>
  <a href="#" class="tac tdn c71717A">
    <div class="fs2rem">👤</div>
    <span class="fs12px">Profile</span>
  </a>
</nav>

반응형

미디어 쿼리 프리픽스와 조합하면 화면 크기에 따라 정렬 방식을 변경할 수 있습니다.

<!-- Desktop center, tablet and below left aligned -->
<div class="df jcc md-jcfs gap16px">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

<!-- Desktop space-between, mobile center -->
<div class="df jcsb sm-jcc gap16px">
  <span>Logo</span>
  <span>Menu</span>
</div>

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 조합	동작
`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) 컨테이너에서도 동일하게 작동합니다.

align-items align-content flex-direction gap display

justify-content

클래스 목록

시각적 비교

space-between vs space-around vs space-evenly

언제 뭘 쓸까?

클래스별 상세

jcfsjustify-content: flex-start

jcfejustify-content: flex-end

jccjustify-content: center

jcsbjustify-content: space-between

jcsajustify-content: space-around

jcsejustify-content: space-evenly

반응형