align-items

flex/grid 컨테이너에서 교차축(cross axis) 방향의 아이템 정렬을 제어합니다. 주축(main axis)에 수직인 방향으로 아이템을 배치하며, df 또는 dg와 함께 사용합니다.

클래스 목록

클래스	CSS	설명
`ais`	align-items: stretch	기본값. 아이템이 교차축 방향으로 컨테이너를 가득 채움
`aifs`	align-items: flex-start	교차축 시작점(상단)에 정렬
`aife`	align-items: flex-end	교차축 끝점(하단)에 정렬
`aic`	align-items: center	교차축 가운데에 정렬. 가장 많이 사용
`aib`	align-items: baseline	텍스트 베이스라인 기준으로 정렬

시각적 비교

각 align-items 값이 교차축 정렬에 어떤 영향을 주는지 비교합니다. 컨테이너 높이를 고정하고, 아이템 높이를 다르게 설정했습니다.

Stretch (기본값) — ais

Short

Medium height content here

Tall item with much more content to show difference

기본값 — 아이템이 컨테이너 높이를 가득 채웁니다 (명시적 높이가 없을 때)

Flex Start — aifs

Short

Medium height content here

Tall item with much more content to show difference

모든 아이템이 상단에 맞춰 정렬됩니다

Flex End — aife

Short

Medium height content here

Tall item with much more content to show difference

모든 아이템이 하단에 맞춰 정렬됩니다

Center — aic

Short

Medium height content here

Tall item with much more content to show difference

모든 아이템이 세로 가운데에 정렬됩니다

Baseline — aib

Short

Medium height content here

Tall item with much more content to show difference

글자 크기가 다르더라도 텍스트 베이스라인이 맞춰집니다

justify-content vs align-items

jcc는 주축(main axis) 가운데 정렬, aic는 교차축(cross axis) 가운데 정렬입니다. 둘을 함께 사용하면 완벽한 중앙 정렬이 됩니다.

justify-content: center — jcc

주축 가운데

가로 방향(주축) 가운데 정렬

align-items: center — aic

교차축 가운데

세로 방향(교차축) 가운데 정렬

완벽한 중앙 — df jcc aic

완벽한 중앙

df jcc aic = 가로 + 세로 모두 가운데

언제 뭘 쓸까?

상황	추천	이유
아이콘 + 텍스트 수직 가운데 정렬	`aic`	교차축 가운데로 아이콘과 텍스트 높이를 맞춤
카드 목록 동일 높이	`ais`	stretch가 아이템을 동일 높이로 늘림
글자 크기가 다른 텍스트 정렬	`aib`	베이스라인 기준으로 텍스트 줄을 맞춤
상단 기준 정렬	`aifs`	높이가 다른 요소를 상단에 맞춤
하단 기준 정렬 (푸터 요소)	`aife`	높이가 다른 요소를 하단에 맞춤

클래스별 상세

`ais`align-items: stretch

기본값입니다. 아이템이 교차축 방향으로 컨테이너를 가득 채웁니다. 카드 목록에서 모든 카드의 높이를 동일하게 맞출 때 유용합니다. 아이템에 명시적 높이가 설정되어 있으면 stretch가 무시됩니다.

<!-- 동일 높이 카드 (stretch 기본값) -->
<div class="df gap16px">
  <div class="bg18181B p2rem br8px fg1">짧은 내용</div>
  <div class="bg18181B p2rem br8px fg1">
    긴 내용이 들어가도
    모든 카드가 동일한 높이
  </div>
  <div class="bg18181B p2rem br8px fg1">중간 내용</div>
</div>

stretch로 동일 높이 카드

짧은 내용

중간 길이의 내용이 들어갑니다

긴 내용이 들어가더라도 모든 카드가 동일한 높이를 유지합니다

높이를 지정하지 않으면 모든 아이템이 가장 큰 아이템에 맞춰 늘어남

`aifs`align-items: flex-start

아이템을 교차축의 시작점(상단)에 정렬합니다. 높이가 다른 요소들을 상단 기준으로 맞출 때 사용합니다.

<!-- 상단 정렬 -->
<div class="df aifs gap16px">
  <div class="bg18181B p2rem br8px">짧은 내용</div>
  <div class="bg18181B p2rem br8px">
    긴 내용이 들어가도
    상단에 맞춰 정렬
  </div>
  <div class="bg18181B p2rem br8px">중간 내용</div>
</div>

상단 정렬

Short

Medium

Tall

높이가 다르더라도 모두 상단에 맞춰 정렬

`aife`align-items: flex-end

아이템을 교차축의 끝점(하단)에 정렬합니다. 푸터 요소나 하단 정렬이 필요한 UI에서 사용합니다.

<!-- 하단 정렬 (푸터 요소) -->
<div class="df aife gap16px h10rem">
  <button class="bg6366F1 cFFFFFF py8px px16px br8px bn">버튼 1</button>
  <button class="bg34D399 c000000 py8px px16px br8px bn">버튼 2</button>
  <button class="bgFBBF24 c000000 py8px px16px br8px bn">버튼 3</button>
</div>

<!-- 카드 하단 정렬 -->
<div class="df aife gap16px">
  <div class="bg18181B p2rem br8px">하단에 맞춤</div>
  <div class="bg18181B p2rem br8px">
    긴 내용이 있어도
    하단 기준으로 정렬
  </div>
</div>

하단 정렬

Short

Medium

Tall

높이가 다르더라도 모두 하단에 맞춰 정렬

`aic`align-items: center

아이템을 교차축의 가운데에 정렬합니다. 가장 많이 사용하는 정렬 클래스입니다. 아이콘 + 텍스트, 네비게이션 아이템, 모든 수직 중앙 정렬에 활용합니다.

<!-- 아이콘 + 텍스트 수직 가운데 -->
<div class="df aic gap8px">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  </svg>
  <span>아이콘과 텍스트 정렬</span>
</div>

<!-- 헤더 양쪽 정렬 + 세로 가운데 -->
<header class="df jcsb aic px2rem py16px">
  <div class="fs2rem fw700">Logo</div>
  <nav class="df aic gap2rem">
    <a href="#">Home</a>
    <a href="#">About</a>
    <button class="bg6366F1 cFFFFFF py8px px16px br8px bn">Sign Up</button>
  </nav>
</header>

<!-- 완벽한 중앙 정렬 -->
<div class="df jcc aic h100vh">
  <div class="tac">
    <h1>404</h1>
    <p>페이지를 찾을 수 없습니다</p>
  </div>
</div>

수직 가운데 정렬

Short

Medium

Tall

모든 아이템이 세로 중앙에 정렬

자주 쓰는 조합

`df aic gap8px`	세로 가운데 + 간격 (아이콘 + 텍스트)
`df jcc aic`	완벽한 중앙 정렬 (가로 + 세로)
`df jcsb aic`	양쪽 끝 배치 + 세로 가운데 (헤더)
`df aic fww gap16px`	세로 가운데 + 줄바꿈 (태그 목록)
`df fdc aic`	세로 방향 + 가로 가운데 정렬

`aib`align-items: baseline

아이템의 텍스트 베이스라인을 기준으로 정렬합니다. 글자 크기가 다른 요소들을 같은 텍스트 줄에 맞출 때 유용합니다.

<!-- 글자 크기가 다른 텍스트 정렬 -->
<div class="df aib gap12px">
  <span class="fs12px">Small</span>
  <span class="fs2-4rem fw700">Title</span>
  <span class="fs16px">Normal</span>
</div>

<!-- 가격 표시 (큰 숫자 + 작은 단위) -->
<div class="df aib gap4px">
  <span class="fs3-6rem fw800">49,900</span>
  <span class="fs14px c71717A">원/월</span>
</div>

baseline vs center 비교

align-items: baseline (aib)

SmallLargeMedium

텍스트 줄이 맞춰짐

align-items: center (aic)

SmallLargeMedium

요소 박스의 중앙이 맞춰짐

반응형

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

<!-- 데스크탑: 세로 가운데 → 태블릿 이하: 상단 정렬 -->
<div class="df aic md-aifs gap16px">
  <img src="avatar.png" />
  <div>
    <h3>이름</h3>
    <p>설명</p>
  </div>
</div>

<!-- 데스크탑: 가운데 → 모바일: 하단 정렬 -->
<div class="df aic sm-aife gap8px">
  <span>Icon</span>
  <span>Text</span>
</div>

클래스 조합	동작
`df aic md-aifs`	기본 가운데 → 1024px 이하에서 상단 정렬
`df aifs sm-aic`	기본 상단 → 768px 이하에서 가운데 정렬
`df aic sm-aife`	기본 가운데 → 768px 이하에서 하단 정렬
`df ais lg-aic`	기본 stretch → 1280px 이하에서 가운데 정렬

팁 & 주의사항

aic는 가장 많이 사용하는 정렬 클래스

세로 가운데 정렬이 필요한 거의 모든 상황에서 df aic를 사용합니다. 아이콘 + 텍스트, 헤더, 네비게이션 등 어디서나 활용됩니다.

df jcc aic = 완벽한 중앙 정렬 (필수 암기!)

df jcc aic는 가로 + 세로 모두 가운데 정렬합니다. 모달 중앙 배치, 로딩 스피너, 빈 상태 메시지 등에 가장 많이 사용하는 패턴입니다.

fdc에서는 align-items가 가로 방향을 제어

fdc(flex-direction: column)를 사용하면 주축이 세로가 됩니다. 이때 aic는 가로 방향 가운데 정렬이 됩니다.

stretch는 아이템에 명시적 높이가 없을 때만 동작

ais(stretch)는 아이템에 height가 설정되어 있으면 무시됩니다. 동일 높이 카드를 만들려면 아이템에 높이를 지정하지 마세요.

justify-content align-content align-self flex-direction display