🧘 Align Self in Action
The align-self property allows a single flex item to override the container’s align-items value — giving you individual alignment control on the cross axis (vertical by default).
📘 Why Use align-self?
While align-items sets alignment for all flex items, align-self lets one item break free and align differently.
This is great when you want exceptions in a row or column layout — for example, highlighting a featured card, aligning one button to the bottom, or creating asymmetric designs.
🧱 Syntax
.flex-item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}Values:
Value | Description |
|---|---|
| Inherits from |
| Align to the start of the cross axis |
| Align to the end of the cross axis |
| Center along the cross axis |
| Align with the text baseline of other items |
| Stretch to fill the container (default for |
📦 Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Align Self Playground</title>
<style>
.infographic-alignself {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
box-sizing: border-box;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--paper);
color: var(--ink);
border-radius: 14px;
overflow: hidden;
}
.infographic-alignself[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
}
.ha-inner { padding: 0.5rem; }
.ha-layout { display: flex; flex-direction: column; gap: 1.1rem; }
.ha-code-wrap {
background: #0b0b0b;
border: 1px solid #2a2a2a;
border-radius: 10px;
overflow: hidden;
}
.ha-filetabs {
display: flex;
background: #161616;
border-bottom: 1px solid #2a2a2a;
}
.ha-filetab {
border: none;
background: transparent;
color: #8a8a8a;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.78rem;
font-weight: 700;
padding: 0.6rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ha-filetab:hover { color: #e5e5e5; }
.ha-filetab.ha-tab-on {
color: #ffffff;
border-bottom-color: #5b8def;
background: #0b0b0b;
}
.ha-codepane { display: none; }
.ha-codepane.ha-pane-on { display: block; }
.ha-tag { color: #60a5fa; font-weight: 700; }
.ha-attr { color: #f2b96b; }
.ha-str { color: #9ece6a; }
.ha-sel { color: #f472b6; font-weight: 700; }
.ha-prop { color: #c586c0; }
.ha-val { color: #ce9178; }
.ha-val-hl { color: #ffd166; font-weight: 700; }
.ha-line { display: block; }
.ha-code {
padding: 0.8rem 1.8rem 0.8rem 0.9rem;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.8rem;
line-height: 1.7;
color: #e5e5e5;
overflow-x: auto;
white-space: pre-wrap;
}
.ha-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.ha-pill {
border: 1px solid var(--line);
background: var(--paper);
color: var(--ink);
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.72rem;
font-weight: 700;
padding: 0.4rem 0.7rem;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ha-pill:hover { border-color: var(--accent); }
.ha-pill.ha-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ha-stage {
background: lightgrey;
border-radius: 8px;
padding: 14px;
height: 220px;
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
transition: transform 0.2s ease;
}
.ha-flex-item {
background-color: steelblue;
color: white;
padding: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-weight: 700;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
width: 70px;
box-sizing: border-box;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), align-self 0s;
}
#item-1 { height: 70px; }
#item-2 {
height: 70px;
background-color: #ffd166;
color: #333;
box-shadow: 0 0 0 3px #b8860b;
}
#item-3 { height: 70px; }
#item-2.ha-baseline-demo { align-items: flex-start; padding-top: 26px; }
.ha-note {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.78rem;
color: var(--ink-soft);
}
</style>
</head>
<body>
<div class="infographic-alignself" id="ha-root">
<div class="ha-inner">
<div class="ha-layout">
<div class="ha-code-wrap">
<div class="ha-filetabs">
<button class="ha-filetab ha-tab-on" id="tab-html">index.html</button>
<button class="ha-filetab" id="tab-css">style.css</button>
</div>
<div class="ha-code"><div class="ha-codepane ha-pane-on" id="pane-html"><span class="ha-line"><<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"container"</span>></span><span class="ha-line"> <<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"flex-item"</span>>1</<span class="ha-tag">div</span>></span><span class="ha-line"> <<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"flex-item special"</span>>2</<span class="ha-tag">div</span>></span><span class="ha-line"> <<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"flex-item"</span>>3</<span class="ha-tag">div</span>></span><span class="ha-line"></<span class="ha-tag">div</span>></span></div><div class="ha-codepane" id="code-out"></div></div>
</div>
<div class="ha-pills" id="self-pills">
<button class="ha-pill ha-on" data-val="auto">auto</button>
<button class="ha-pill" data-val="flex-start">flex-start</button>
<button class="ha-pill" data-val="flex-end">flex-end</button>
<button class="ha-pill" data-val="center">center</button>
<button class="ha-pill" data-val="baseline">baseline</button>
<button class="ha-pill" data-val="stretch">stretch</button>
</div>
<div class="ha-stage" id="stage">
<div class="ha-flex-item" id="item-1">1</div>
<div class="ha-flex-item" id="item-2">2</div>
<div class="ha-flex-item" id="item-3">3</div>
</div>
<div class="ha-note" id="note-out"></div>
</div>
</div>
</div>
<script>
(function () {
const wrapper = document.getElementById('ha-root');
const bodyAttr = document.body.getAttribute('data-darkmode');
let dark;
if (bodyAttr === 'true') {
dark = true;
} else if (bodyAttr === 'false') {
dark = false;
} else {
const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) wrapper.setAttribute('data-theme', 'dark');
})();
(function () {
const tabHtml = document.getElementById('tab-html');
const tabCss = document.getElementById('tab-css');
const paneHtml = document.getElementById('pane-html');
const paneCss = document.getElementById('code-out');
tabHtml.addEventListener('click', () => {
tabHtml.classList.add('ha-tab-on');
tabCss.classList.remove('ha-tab-on');
paneHtml.classList.add('ha-pane-on');
paneCss.classList.remove('ha-pane-on');
});
tabCss.addEventListener('click', () => {
tabCss.classList.add('ha-tab-on');
tabHtml.classList.remove('ha-tab-on');
paneCss.classList.add('ha-pane-on');
paneHtml.classList.remove('ha-pane-on');
});
})();
(function () {
const item2 = document.getElementById('item-2');
const codeOut = document.getElementById('code-out');
const note = document.getElementById('note-out');
const notes = {
'auto': "The default — item 2 just follows the container's align-items (here: center), same as its unstyled siblings.",
'flex-start': 'Item 2 breaks away from the container-wide "center" rule and aligns to the TOP instead — align-self always overrides align-items for that one item.',
'flex-end': 'Item 2 aligns to the BOTTOM, ignoring whatever the container set for everyone else.',
'center': 'Item 2 centers vertically — same result as auto here, since the container already uses align-items: center.',
'baseline': "Item 2's text baseline is set to line up with a taller item (simulated with extra top padding here for the demo). In real multi-item layouts, baseline aligns each item's first line of text, regardless of box height.",
'stretch': 'Item 2 stretches to fill the container\u2019s full height, ignoring its own set height — this only works because no explicit height stops it.'
};
document.getElementById('self-pills').querySelectorAll('.ha-pill').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.ha-pill').forEach(p => p.classList.remove('ha-on'));
btn.classList.add('ha-on');
const val = btn.getAttribute('data-val');
item2.classList.remove('ha-baseline-demo');
item2.style.height = '';
item2.style.alignSelf = val;
if (val === 'baseline') item2.classList.add('ha-baseline-demo');
codeOut.innerHTML =
'<span class="ha-sel">.container</span> {\n <span class="ha-prop">display</span>: <span class="ha-val">flex</span>;\n <span class="ha-prop">align-items</span>: <span class="ha-val">center</span>;\n}\n' +
'<span class="ha-sel">.special</span> {\n <span class="ha-prop">align-self</span>: <span class="ha-val-hl">' + val + '</span>;\n}';
note.textContent = notes[val];
});
});
codeOut.innerHTML =
'<span class="ha-sel">.container</span> {\n <span class="ha-prop">display</span>: <span class="ha-val">flex</span>;\n <span class="ha-prop">align-items</span>: <span class="ha-val">center</span>;\n}\n' +
'<span class="ha-sel">.special</span> {\n <span class="ha-prop">align-self</span>: <span class="ha-val-hl">auto</span>;\n}';
note.textContent = notes['auto'];
})();
</script>
</body>
</html>.demo {
font-family: system-ui, sans-serif;
padding: 16px;
}
.demo h1 {
color: #2563eb;
margin: 0 0 8px;
}
.demo p {
color: #4b5563;
margin: 0;
}document.querySelector('.demo h1')?.addEventListener('click', () => {
alert('Hello from live preview!');
});All items align to the top due to
align-items: flex-startThe “Special” item aligns to the bottom using
align-self: flex-end
🧠 Use Cases
Highlight a single item in a card layout
Vertically align a button or icon differently
Create dynamic stacking effects in complex UI
⚠️ Notes
Works only on flex items
Overrides the parent’s
align-itemsonly for that itemDoesn’t affect main axis alignment — use
justify-contentfor that