align-items

Controls cross-axis item alignment in flex/grid containers. Aligns items perpendicular to the main axis. Used with df or dg.

Class List

Class	CSS	Description
`ais`	align-items: stretch	Default. Items stretch to fill container on cross axis
`aifs`	align-items: flex-start	Aligned to cross-axis start (top)
`aife`	align-items: flex-end	Aligned to cross-axis end (bottom)
`aic`	align-items: center	Centered on cross axis. Most commonly used
`aib`	align-items: baseline	Aligned by text baseline

Visual Comparison

Compares how each align-items value affects cross-axis alignment. Container height is fixed with varying item heights.

Stretch (default value) — ais

Short

Medium height content here

Tall item with much more content to show difference

Default — items fill container height (when no explicit height)

Flex Start — aifs

Short

Medium height content here

Tall item with much more content to show difference

All items aligned to the top

Flex End — aife

Short

Medium height content here

Tall item with much more content to show difference

All items aligned to the bottom

Center — aic

Short

Medium height content here

Tall item with much more content to show difference

All items centered vertically

Baseline — aib

Short

Medium height content here

Tall item with much more content to show difference

Text baselines aligned regardless of font size

justify-content vs align-items

jcc centers on the main axis, aic centers on the cross axis. Together they achieve perfect centering.

justify-content: center — jcc

Main axis center

Horizontal (main axis) centering

align-items: center — aic

Cross axis center

Vertical (cross axis) centering

Perfect center — df jcc aic

Perfect center

df jcc aic = centered both horizontally and vertically

When to Use What?

Situation	Recommended	Reason
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

Class Details

`ais`align-items: stretch

Default. Items stretch to fill the container along the cross axis. Useful for equal-height cards. Ignored if items have explicit height.

<!-- 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>

Equal-height cards with stretch

Short content

Medium length content goes here

Even with long content, all cards maintain the same height

Without explicit height, all items stretch to match the tallest

`aifs`align-items: flex-start

Aligns items to the cross-axis start (top). Used for top-aligning elements with different heights.

<!-- 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>

Top alignment

Short

Medium

Tall

All items aligned to the top regardless of height

`aife`align-items: flex-end

Aligns items to the cross-axis end (bottom). Used for footer elements or bottom-aligned UIs.

<!-- 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>

Bottom alignment

Short

Medium

Tall

All items aligned to the bottom regardless of height

`aic`align-items: center

Centers items on the cross axis. The most commonly used alignment class. Used for icon + text, navigation items, and all vertical centering.

<!-- 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>

Vertical centering

Short

Medium

Tall

All items centered vertically

Common Combinations

`df aic gap8px`	Vertical center + gap (icon + text)
`df jcc aic`	Perfect centering (horizontal + vertical)
`df jcsb aic`	Space-between + vertical center (header)
`df aic fww gap16px`	Vertical center + wrap (tag list)
`df fdc aic`	vertical direction + horizontal center alignment

`aib`align-items: baseline

Aligns items by text baseline. Useful for aligning elements with different font sizes to the same text line.

<!-- 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 comparison

align-items: baseline (aib)

SmallLargeMedium

Text lines are aligned

align-items: center (aic)

SmallLargeMedium

Element box centers are aligned

Responsive

Combine with media query prefixes to change alignment by screen size.

<!-- 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">Class Combination	Behavior
`df aic md-aifs`	Default center → top alignment below 1024px
`df aifs sm-aic`	Default top → center alignment below 768px
`df aic sm-aife`	Default center → bottom alignment below 768px
`df ais lg-aic`	Default stretch → center alignment below 1280px

Tips & Notes

aic is the most commonly used alignment class

Use df aic in nearly all vertical centering situations. Used everywhere: icon + text, headers, navigation, etc.

df jcc aic = perfect centering (must memorize!)

df jcc aic centers both horizontally and vertically. Most used pattern for modals, loading spinners, empty state messages, etc.

With fdc, align-items controls horizontal direction

With fdc (flex-direction: column), the main axis becomes vertical. Then aic centers horizontally.

stretch only works without explicit item height

ais (stretch) is ignored when height is set on items. Do not set height for equal-height cards.

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