CSS align-self Property

Definition and usage

align-self The property specifies the alignment method of the selected item within the flexible container.

Note:The align-self property overrides the align-self property of the flexible container. align-items properties.

See also:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Flexbox

CSS Reference Manual:alignContent property

CSS Reference Manual:alignItems property

CSS Reference Manual:justifySelf property

HTML DOM Reference Manual:alignSelf property

Example

Align one of the items inside the flexible element to the center:

#myBlueDiv {
  align-self: center;
}

Try it yourself

CSS syntax

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

Property value

Value Description
auto Default. The element inherits the align-items property of its parent container, or "stretch" if there is no parent container.
stretch The element is stretched to fit the container.
center The element is located in the center of the container.
flex-start The element is located at the beginning of the container.
flex-end The element is located at the end of the container.
baseline The element is positioned at the baseline of the container.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical details

Default value: auto
Inheritance: No
Animation creation: Not supported. See also:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.alignSelf="center"

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0