align-self
Overrides the parent's align-items on individual flex items. Applied to child elements for different alignment.
Class List
| Class | CSS | Description |
|---|---|---|
asa | align-self: auto | Inherits parent's align-items value (default) |
ass | align-self: stretch | Stretches to container height along cross axis |
asfs | align-self: flex-start | Aligned to cross-axis start (top) |
asfe | align-self: flex-end | Aligned to cross-axis end (bottom) |
asc | align-self: center | Centered on cross axis |
asb | align-self: baseline | Aligned to text baseline |
Visual Comparison
Result of changing align-self on only the second item in a flex container with aic on the parent.
auto (parent aic inheritance) — asa
Follows parent's align-items: center — same as default
stretch — ass
Only Item 2 stretches to full container height
flex-start — asfs
Only Item 2 aligned to top (overrides parent aic)
flex-end — asfe
Only Item 2 aligned to bottom (overrides parent aic)
center — asc
Item 2 centered — same as parent aic but explicitly set
baseline — asb
Item 2 aligned to text baseline
Class Details
asaalign-self: auto
Inherits the parent's align-items value. Useful for resetting align-self in responsive or pseudo-class contexts.
<!-- Reset align-self in responsive -->
<div class="df aic h12rem">
<span class="asfs sm-asa">Follows parent alignment on mobile</span>
<span>Default item</span>
</div>assalign-self: stretch
Stretches the item to container height along the cross axis. Even with parent aic, this item takes full height.
<!-- Only sidebar takes full height -->
<div class="df aic gap16px h20rem">
<aside class="ass bg18181B p16px br4px">
Full height Sidebar
</aside>
<main class="p16px">Center aligned Main Content</main>
<nav class="p16px">Center aligned Navigation</nav>
</div>asfsalign-self: flex-start
Aligns the item to cross-axis start (top). Even with parent aic or aife, this item stays at top.
<!-- Only logo fixed to top in header -->
<header class="df aic gap16px h8rem">
<img class="asfs" src="/logo.svg" alt="Logo" />
<nav>Menu (Center aligned)</nav>
<button>CTA (Center aligned)</button>
</header>asfealign-self: flex-end
Aligns the item to cross-axis end (bottom). Even with parent aic, this item stays at bottom.
<!-- Button fixed to bottom of card -->
<div class="df aic gap16px h12rem">
<span>Normal item</span>
<button class="asfe bg6366F1 cFFFFFF py8px px16px br4px bn cp">
Bottom fixed button
</button>
<span>Normal item</span>
</div>ascalign-self: center
Centers the item on the cross axis. Even with parent aifs or ass, this item is vertically centered.
<!-- Center only specific item in stretch parent -->
<div class="df ais gap16px h12rem">
<span class="bg18181B p16px br4px">Full height (stretch)</span>
<span class="asc bg34D399 c000000 p16px br4px">Center aligned</span>
<span class="bg18181B p16px br4px">Full height (stretch)</span>
</div>asbalign-self: baseline
Aligns the item to text baseline. Useful when items with different text sizes need baseline alignment.
<!-- Baseline alignment for different size text -->
<div class="df aifs gap16px h12rem">
<span class="asb fs2-4rem">Large text</span>
<span class="asb fs14px">Small text</span>
<span class="asb fs16px">Medium text</span>
</div>Tips & Notes
Apply to child elements
align-self applies to child items, not the container. No effect on the parent.
Overrides align-items
Overrides parent's align-items on individual items. E.g., with parent aic, adding asfs to a child aligns only that item to top.
"One exception" pattern
Align most items with align-items and use align-self only for exceptions. Applying align-self to every item is inefficient.
Works in Grid too
align-self works identically in grid containers for individual vertical alignment.