align-self

Overrides the align-items value for a single item, aligning it on the cross axis without affecting its siblings.

auto (default): inherits the container’s align-items value.
flex-start: places the item at the start of the cross axis.
center: centers the item on the cross axis.
flex-end: places the item at the end of the cross axis.
stretch: stretches the item along the cross axis if it has no fixed size.
baseline: aligns the item along its text baseline.

Example

The container centres its children with align-items: center, so auto also leaves them centred. The child with the item class can escape that rule with align-self.

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-items: center;
  height: 10rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  align-self: auto;
  background: #d9d2f5;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  align-items: center;
  height: 10rem;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  align-self: auto;
  background: #d9d2f5;
}

Edit the code or use the selectors: the result updates instantly.