Align Self in CSS

From the CSS Flexbox cheat sheet · Flex Items · verified Jul 2026

Align Self

Override the container's align-items value for individual flex items

css
.item {
  align-self: auto;       /* use align-items */
  align-self: flex-start; /* align to start */
  align-self: flex-end;   /* align to end */
  align-self: center;     /* center this item */
  align-self: stretch;    /* stretch to fill */
}
html
<div class="container">
  <div class="item">Default</div>
  <div class="item self-center">Centered</div>
  <div class="item self-end">End</div>
</div>
🎨 Align Self
Default
Start
Center
End
🎯 Overrides align-items
💡 For individual items
⚡ Useful for exceptions

More CSS tasks

Back to the full CSS Flexbox cheat sheet