This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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

See also

Related articles

CSS Layout

Flexbox

External resources

Also, check out the following live demo sites: