Style alignSelf Property
Example
Set the alignments for one of the items inside a flexible element to fit the container:
document.getElementById("myBlueDiv").style.alignSelf = "stretch";Try it Yourself »
Description
The alignSelf property specifies the alignment for the selected item inside the flexible container.
Note: The alignSelf property overrides the flexible container's alignItems property.
Syntax
Return the alignSelf property:
object.style.alignSelf
Set the alignSelf property:
object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"
Property Values
| Value | Description |
|---|---|
| auto | Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container |
| stretch | The element is positioned to fit the conatiner |
| center | The element is positioned at the center of the container |
| flex-start | The element is are positioned at the beginning of the container |
| flex-end | The element is positioned 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. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | auto |
|---|---|
| Return Value: | A String, representing the align-self property of an element |
| CSS Version | CSS3 |
Browser Support
alignSelf is a CSS3 (1999) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 11 |
Related Pages
CSS reference: align-self property
HTML DOM STYLE Reference: alignContent property
HTML DOM STYLE Reference: alignItems property
