align-self

Summary

The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the flex item's cross-axis margin is set to auto, then align-self is ignored.

Initial value	`auto`
Applies to	flex items, including in-flow pseudo-elements
Inherited	no
Media	visual
Computed value	`auto` computes to itself on absolutely-positioned elements, and to the computed value of `align-items` on the parent (minus any legacy keywords) on all other boxes, or `start` if the box has no parent. Its behavior depends on the layout model, as described for `justify-self`. Otherwise the specified value.
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

See Using CSS flexible boxes for more properties and information.

Syntax

/* Keyword values */
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;

/* Global values */
align-self: inherit;
align-self: initial;
align-self: unset;

Values

auto: Computes to parent's align-items value or stretch if the element has no parent.
flex-start: The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
flex-end: The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
center: The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
baseline: All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
stretch: Flex items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints.

Formal syntax

auto | flex-start | flex-end | center | baseline | stretch

Specifications

Specification	Status	Comment
CSS Box Alignment Module The definition of 'align-self' in that specification.	Working Draft	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	21.0-webkit 36.0	20.0 (20.0)^[1]	11.0	12.10	No support

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	No support	12.10	No support

[1] Firefox supports only single-line flexbox until Firefox 27. To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference layout.css.flexbox.enabled to true.

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.