align-items

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

클래스 목록

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

Main axis center

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

align-items: center — aic

Cross axis center

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

완벽한 중앙 — df jcc aic

Perfect center

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

언제 뭘 쓸까?

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황	추천	이유
Icon + text vertical centering	`aic`	Aligns icon and text height on cross axis center
Equal height card list	`ais`	Stretch makes items equal height
Aligning text with different font sizes	`aib`	Aligns text lines by baseline
Top-aligned layout	`aifs`	Aligns elements with different heights to top
Bottom-aligned layout (footer elements)	`aife`	Aligns elements with different heights to bottom

클래스별 상세

`ais`align-items: stretch

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

<!-- Equal height cards (stretch default) -->
<div class="df gap16px">
  <div class="bg18181B p2rem br8px fg1">Short content</div>
  <div class="bg18181B p2rem br8px fg1">
    Even with long content,
    all cards have equal height
  </div>
  <div class="bg18181B p2rem br8px fg1">Medium content</div>
</div>

stretch로 동일 높이 카드

Short content

Medium length content goes here

Even with long content, all cards maintain the same height

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

`aifs`align-items: flex-start

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

<!-- Top alignment -->
<div class="df aifs gap16px">
  <div class="bg18181B p2rem br8px">Short content</div>
  <div class="bg18181B p2rem br8px">
    Even with long content,
    aligned to the top
  </div>
  <div class="bg18181B p2rem br8px">Medium content</div>
</div>

상단 정렬

Short

Medium

Tall

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

`aife`align-items: flex-end

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

<!-- Bottom alignment (footer elements) -->
<div class="df aife gap16px h10rem">
  <button class="bg6366F1 cFFFFFF py8px px16px br8px bn">Button 1</button>
  <button class="bg34D399 c000000 py8px px16px br8px bn">Button 2</button>
  <button class="bgFBBF24 c000000 py8px px16px br8px bn">Button 3</button>
</div>

<!-- Card bottom alignment -->
<div class="df aife gap16px">
  <div class="bg18181B p2rem br8px">Aligned to bottom</div>
  <div class="bg18181B p2rem br8px">
    Even with long content,
    aligned to bottom reference
  </div>
</div>

하단 정렬

Short

Medium

Tall

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

`aic`align-items: center

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

<!-- Icon + Text vertical 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>Icon and text aligned</span>
</div>

<!-- Header space-between + vertical center -->
<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>

<!-- Perfect center alignment -->
<div class="df jcc aic h100vh">
  <div class="tac">
    <h1>404</h1>
    <p>Page not found</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

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

<!-- Aligning text with different sizes -->
<div class="df aib gap12px">
  <span class="fs12px">Small</span>
  <span class="fs2-4rem fw700">Title</span>
  <span class="fs16px">Normal</span>
</div>

<!-- Price display (large number + small unit) -->
<div class="df aib gap4px">
  <span class="fs3-6rem fw800">49,900</span>
  <span class="fs14px c71717A">won/mo</span>
</div>

baseline vs center 비교

align-items: baseline (aib)

SmallLargeMedium

텍스트 줄이 맞춰짐

align-items: center (aic)

SmallLargeMedium

요소 박스의 중앙이 맞춰짐

반응형

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

<!-- Desktop: vertical center → Tablet and below: top alignment -->
<div class="df aic md-aifs gap16px">
  <img src="avatar.png" />
  <div>
    <h3>Name</h3>
    <p>Description</p>
  </div>
</div>

<!-- Desktop: center → Mobile: bottom alignment -->
<div class="df aic sm-aife gap8px">
  <span>Icon</span>
  <span>Text</span>
</div>

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