Style alignSelf Property

Definition and Usage

alignSelf This property specifies the alignment of the selected item within the flexible container.

Note:The alignSelf attribute overrides the align-items property of the flexible container. alignItems Attribute.

Example

Set alignment for one of the flexible elements to fit the container:

document.getElementById("myBlueDiv").style.alignSelf = "stretch";

Try It Yourself

Syntax

Return alignSelf attribute:

object.style.alignSelf

Set alignSelf attribute:

object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"

Property Value

Value Description
auto Default. The element inherits its parent container's align-items property, or 'stretch' if there is no parent container.
stretch The element is stretched to fit the container.
center The element is located at 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 located at the baseline of the container.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Return Value: A string that represents the align-self attribute.
CSS Version: CSS3

Browser Support

alignItems It is a CSS3 (1999) feature.

All browsers fully support it:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Supported Supported Supported Supported Supported 11

Related Pages

CSS Reference Manual:align-self attribute

HTML DOM STYLE Reference Manual:alignContent Attribute

HTML DOM STYLE Reference Manual:alignItems Attribute