Style alignItems Attribute

Definition and Usage

alignItems Property specifies the default alignment method for items within the elastic container.

Tip:Use the align-self attribute to override align-items attribute.

Example

Align the alignment positioning of all items of the elastic <div> element to the beginning of the container:

document.getElementById("main").style.alignItems = "flex-start";

Try It Yourself

Syntax

Return alignItems Attribute:

object.style.alignItems

Set alignItems Attribute:

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

Property Value

Value Description
stretch Default. The item is stretched to fit the container.
center The item is located in the center of the container.
flex-start The item is located at the beginning of the container.
flex-end The item is located at the end of the container.
baseline The item is positioned 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: stretch
Return Value: A string representing the align-items 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-items attribute

HTML DOM STYLE Reference Manual:alignContent Property

HTML DOM STYLE Reference Manual:alignSelf Property