align-self

Summary

Allows the default alignment to be overridden for individual flex items.

Overview table

Initial value: auto
Applies to: flex items
Inherited: No
Media: visual
Computed value: auto computes to parent’s align-items, or stretch if the element has no parent; otherwise as specified
Animatable: No
CSS Object Model Property: alignSelf

Syntax

align-self: auto
align-self: baseline
align-self: center
align-self: flex-end
align-self: flext-start
align-self: stretch
flex-item-align: auto
flex-item-align: baseline
flex-item-align: center
flex-item-align: end
flex-item-align: start
flex-item-align: stretch

Values

auto: Computes to the value of align-items on the element’s parent, or stretch if the element has no parent.
flext-start: The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.
flex-end: The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.
center: The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)
baseline: If the flex item’s inline axis is the same as the cross axis, this value is identical to flex-start.

Otherwise, it participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line.

stretch: If the cross size property of the flex item is auto, its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Note: that if the flex container’s height is constrained the stretch value may cause the contents of the flex item to overflow the item.

Examples

Displaying children with custom alignment.

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list div {
  flex: 1;
}

.list .second {
  align-self: flex-end;
}

View live example

Notes

This property will have no effect if the flex-item’s cross axis margins are set to auto.
This property was named flex-item-align in older drafts.

Related specifications

CSS Flexible Box Layout Module: Candidate Recommendation

align-self

Summary

Overview table

Syntax

Values

Examples

Notes

Related specifications

See also

Related articles

CSS Layout

Flexbox

External resources