AAtomic CSS

align-content

여러 줄(multi-line)의 flex 아이템이 교차축(cross axis)에서 어떻게 정렬되는지를 제어합니다. flex-wrap: wrap이 적용되어 아이템이 여러 줄로 감싸질 때만 효과가 있습니다.

클래스 목록

클래스CSS설명
acsalign-content: stretch기본값. 줄이 남은 공간을 균등하게 채움
acfsalign-content: flex-start모든 줄을 교차축 시작점(위쪽)으로 정렬
acfealign-content: flex-end모든 줄을 교차축 끝점(아래쪽)으로 정렬
accalign-content: center모든 줄을 교차축 가운데에 정렬
acsbalign-content: space-between첫 줄과 마지막 줄을 양 끝에 배치, 나머지 균등 분배
acsaalign-content: space-around각 줄 위아래에 균등 간격 배치

시각적 비교

고정 높이 컨테이너에 df fww를 적용하고, 각 align-content 값이 여러 줄에 어떤 영향을 주는지 비교합니다.

Stretch (기본값) — acs

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

각 줄이 남은 공간을 균등하게 나누어 늘어남

Flex Start — acfs

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

모든 줄이 위쪽으로 몰림

Flex End — acfe

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

모든 줄이 아래쪽으로 몰림

Center — acc

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

모든 줄이 가운데에 모임

Space Between — acsb

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

첫 줄은 위, 마지막 줄은 아래, 나머지는 균등 분배

Space Around — acsa

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8

각 줄 위아래에 균등한 간격

align-items vs align-content

align-items는 각 줄 안에서 개별 아이템의 교차축 정렬을 제어하고, align-content는 줄(line) 자체를 그룹으로 정렬합니다.

align-items: center — aic

Item 1Item 2Item 3Item 4Item 5Item 6

각 줄 안에서 아이템을 개별적으로 가운데 정렬. 줄 사이 간격은 그대로

align-content: center — acc

Item 1Item 2Item 3Item 4Item 5Item 6

줄들을 그룹으로 묶어 컨테이너 가운데에 배치

align-itemsalign-content
대상각 줄 안의 개별 아이템줄(line) 전체를 그룹으로
작동 조건항상 작동flex-wrap: wrap 필수 (여러 줄일 때만)
단일 줄효과 있음효과 없음
여러 줄각 줄 내에서 아이템 정렬줄 간 간격/위치 제어
주요 클래스aic, aifs, aife, aibacc, acfs, acfe, acsb, acsa

클래스별 상세

acsalign-content: stretch

기본값입니다. 각 줄이 남은 공간을 균등하게 나누어 늘어납니다. 컨테이너의 높이가 아이템 전체 높이보다 클 때 줄이 확장됩니다.

<!-- stretch: 줄이 남은 공간을 균등 분배 -->
<div class="df fww acs h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
</div>

acfsalign-content: flex-start

모든 줄을 컨테이너의 교차축 시작점(위쪽)으로 몰아서 배치합니다. 아래쪽에 빈 공간이 생깁니다.

<!-- flex-start: 모든 줄을 위쪽으로 -->
<div class="df fww acfs h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
</div>

acfealign-content: flex-end

모든 줄을 컨테이너의 교차축 끝점(아래쪽)으로 몰아서 배치합니다. 위쪽에 빈 공간이 생깁니다.

<!-- flex-end: 모든 줄을 아래쪽으로 -->
<div class="df fww acfe h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
</div>

accalign-content: center

모든 줄을 교차축 가운데에 모아서 배치합니다. 위아래에 균등한 빈 공간이 생깁니다.

<!-- center: 모든 줄을 가운데로 -->
<div class="df fww acc h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
</div>

<!-- jcc와 조합: 가로 세로 모두 가운데 -->
<div class="df fww jcc acc h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">완전 가운데</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">정렬</div>
</div>

acsbalign-content: space-between

첫 줄은 컨테이너 시작점에, 마지막 줄은 끝점에 배치하고, 나머지 줄은 사이에 균등 분배합니다.

<!-- space-between: 첫 줄 위, 마지막 줄 아래 -->
<div class="df fww acsb h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 7</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 8</div>
</div>

acsaalign-content: space-around

각 줄 위아래에 균등한 간격을 배치합니다. 양 끝 간격은 줄 사이 간격의 절반입니다.

<!-- space-around: 각 줄에 균등 간격 -->
<div class="df fww acsa h30rem gap8px">
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 1</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 2</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 3</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 4</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 5</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 6</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 7</div>
  <div class="bg6366F1 cFFFFFF py8px px16px br4px">Item 8</div>
</div>

팁 & 주의사항

fww 필수

align-content는 반드시 fww(flex-wrap: wrap)와 함께 사용해야 합니다. 줄바꿈이 없는 단일 줄 flex에서는 아무 효과가 없습니다.

단일 줄에서는 align-items 사용

아이템이 한 줄에 모두 들어가는 경우 align-content는 무시됩니다. 단일 줄에서의 교차축 정렬은 aic, aifs 등 align-items 클래스를 사용하세요.

컨테이너 높이 필요

align-content 효과를 확인하려면 컨테이너에 명시적인 높이(예: h30rem, h100vh)가 있어야 합니다. 높이가 auto이면 콘텐츠에 맞춰지므로 정렬 차이가 보이지 않습니다.

align-itemsalign-selfflex-wrapjustify-content