The CSS align-self property

Q: What is the difference between align-self and align-items?

align-items aligns all items in the container; align-self overrides that for one specific item.

Q: How do I align just one flex item differently?

Put align-self on that item, e.g. align-self: center. It ignores the container's align-items value for that one element.

Q: How do I push a single flex item to the other end?

For the cross axis use align-self. For the main axis, an auto margin like margin-left: auto pushes one item to the far side.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS align-self property sets the cross-axis alignment of a single flex or grid item, overriding the container's align-items. Use it when one item should sit differently from the rest — for example align-self: flex-end to drop a single card to the bottom of the row.

Overview

align-items sets the cross-axis alignment for every item in a flex or grid container at once. align-self is its per-item escape hatch: put it on a single child and that child aligns however you like, while its siblings keep following the container's rule.

It takes the same values as align-items — flex-start, center, flex-end, stretch, baseline — plus auto, the default, which simply means "inherit whatever the container said." So a row of top-aligned cards can have one that drops to the bottom, with nothing more than align-self: flex-end on that one element.

It saves you from restructuring markup or adding wrapper elements just to make one item behave differently. Whenever you find yourself thinking "these all align the same way except this one," align-self is the answer.

Syntax

/* one item drops to the bottom */
.item {
  align-self: flex-end;
}

Values

The align-self property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`auto`	Use the container's align-items value. The default.
`stretch`	Stretch to fill the cross axis.
`flex-start`	Align to the start of the cross axis (the top, in a row).
`center`	Center on the cross axis.
`flex-end`	Align to the end of the cross axis (the bottom, in a row).
`baseline`	Align by the item's text baseline.

Example

Live example

<style>
  .row { display: flex; align-items: flex-start; gap: 10px; height: 130px; background: #eef2ff; border-radius: 10px; padding: 12px; font: 600 13px system-ui, sans-serif; }
  .row div { background: #1c7ce9; color: #fff; padding: 12px; border-radius: 8px; }
  .drop { align-self: flex-end; }
  .mid { align-self: center; }
</style>
<div class="row">
  <div>top</div>
  <div class="mid">center</div>
  <div class="drop">bottom</div>
</div>

Best practices

Use align-self to make one item differ rather than restructuring the layout or adding wrappers.
Set the common alignment once with align-items on the container, then override only the exceptions.
Remember it acts on the cross axis — to nudge a single item along the main axis instead, use a margin (e.g. margin-left: auto).
It works in both Flexbox and Grid, so the same property handles exceptions in either layout.

Frequently asked questions

What is the difference between align-self and align-items?

align-items aligns all items in the container; align-self overrides that for one specific item.

How do I align just one flex item differently?

Put align-self on that item, e.g. align-self: center. It ignores the container's align-items value for that one element.

How do I push a single flex item to the other end?

For the cross axis use align-self. For the main axis, an auto margin like margin-left: auto pushes one item to the far side.

Does align-self work in CSS Grid?

Yes. It sets the block-axis alignment of a single grid item, just as it does for a flex item.

align-items animation

References