CSS propertyFlexbox

align-self

Overrides the cross-axis alignment of a single item.

Initial value: auto
Inherited: No
Animatable: no
Applies to: flex items, grid items, and absolutely positioned elements
JavaScript: element.style.alignSelf = "flex-end"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

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

.row .action {
  align-self: center;
}

Example HTML

<div class="row stage" style="gap: 12px;">
  <div><strong>Module 3: Flexbox</strong><br>The main axis, the cross axis, and aligning items inside a container.</div>
  <button class="action" type="button">Start</button>
</div>

Preview

Definition and usage

The align-self property is set on a single flex or grid item, not on the container. It lets that item break away from the overall alignment set by the parent’s align-items.

Typical examples are a button pinned to the bottom of a card, an icon centered vertically next to a tall block of text, or one item stretched while the rest sit at the top.

The value auto means "do whatever the parent’s align-items says."

Syntax

align-self: auto | stretch | flex-start | flex-end | center | baseline;

Values

auto
The item follows the parent’s align-items (here flex-start).
center
Only item 2 moves to the center.
flex-end
Only item 2 lines up at the bottom.
stretch
Item 2 stretches to the full height.

Value	Description
auto	The item follows the parent’s `align-items` (here `flex-start`).
center	Only item 2 moves to the center.
flex-end	Only item 2 lines up at the bottom.
stretch	Item 2 stretches to the full height.

Values in practice

auto

The item follows the parent’s align-items (here flex-start).

.target { align-self: auto; }

center

Only item 2 moves to the center.

.target { align-self: center; }

flex-end

Only item 2 lines up at the bottom.

.target { align-self: flex-end; }

stretch

Item 2 stretches to the full height.

.target { align-self: stretch; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Flexbox has no justify-self for main-axis alignment. Use an auto margin instead, for example margin-left: auto.
You set align-self on the child, and align-items on the parent.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course