CSS align-self Property

What You’ll Learn

The align-self property lets you override cross-axis alignment for a single flex item or grid item. It is the item-level companion to align-items, useful when one box needs different positioning than its neighbors.

Definition and Usage

The align-self CSS property overrides the cross-axis alignment of an individual flex item or grid item. While align-items sets the default for every item in the container, align-self lets one item break that rule.

This is helpful for layouts like a row of cards where one action button sits at the bottom, or a toolbar where one icon needs vertical centering while the rest stay top-aligned.

📝 Syntax

Apply align-self to a flex item or grid item:

.item {
  align-self: value;
}

Basic Example

.container {
  display: flex;
  align-items: flex-start;
}

.item.special {
  align-self: flex-end;
}

Syntax Rules

• Apply align-self to the item, not the flex or grid container.
• The default value is auto, which uses the container’s align-items value.
• Accepted keywords match align-items: stretch, center, flex-start, flex-end, and baseline.
• Use it sparingly for exceptions; too many overrides can make layouts harder to maintain.

Default Value

The initial value of align-self is auto. The item follows whatever alignment the container sets with align-items.

💎 Property Values

These keyword values override cross-axis alignment for a single item.

align-self vs align-items

Examples Gallery

Try align-self to override one item with flex-end, center, stretch, and baseline.

<style>
  .container {
    display: flex;
    height: 200px;
    background: lightgray;
    align-items: flex-start;
  }
  .item {
    width: 50px;
    height: 50px;
    margin: 10px;
    background: coral;
  }
  .item.special {
    align-self: flex-end;
  }
</style>

<div class="container">
  <div class="item"></div>
  <div class="item special"></div>
  <div class="item"></div>
</div>

.card-row {
  display: flex;
  align-items: flex-start;
  min-height: 180px;
}
.card.featured {
  align-self: center;
}

.panel {
  display: flex;
  align-items: flex-start;
  height: 140px;
}
.sidebar {
  align-self: stretch;
}

<style>
  .label-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .label-row .caption {
    align-self: baseline;
    font-size: 0.875rem;
  }
</style>

<div class="label-row">
  <span style="font-size:2rem">Ag</span>
  <span class="caption">Caption</span>
</div>

💡 Best Practices