Easy Tutorial
❮ Prop Body Text Prop Style Borderleftstyle ❯

alignSelf Property

Style Object

Example

Center align a single item within a flexible element:


Definition and Usage

The alignSelf property specifies the alignment for the selected item inside a flexible container.

Note: The alignSelf property overrides the alignItems property of the flexible container.


Browser Support

Firefox, Opera, and Chrome support the alignSelf property.

Syntax

Return the alignSelf property:

Set the alignSelf property:

Property Values

Value Description
auto Default value. The element inherits its parent container's align-items property. If there is no parent container, it defaults to "stretch".
stretch The element is stretched to fit the container.
center The element is centered within the container.
flex-start The element is positioned at the start of the container.
flex-end The element is positioned at the end of the container.
baseline The element is positioned on 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 representing the align-self property of the element.
CSS version CSS3

Related Articles

CSS Reference: align-self Property

HTML DOM STYLE Reference: alignContent Property

HTML DOM STYLE Reference: alignItems Property


Style Object

❮ Prop Body Text Prop Style Borderleftstyle ❯