CSS align-items Property

Definition and Usage

align-items property to specify the default alignment for items within the elastic container.

Tip:Use the align-self properties to override this align-items property.

See Also:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Flexbox

CSS Reference Manual:align-content Property

CSS Reference Manual:align-self Property

CSS Reference Manual:justify-content Property

CSS Reference Manual:justify-items Property

CSS Reference Manual:justify-self Property

HTML DOM Reference Manual:alignItems Property

Example

Align all items of the elastic <div> element to the center:

div {
  display: flex;
  align-items: center;
}

Try It Yourself

CSS Syntax

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

Attribute 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
Inheritance: No
Animation Creation: Not supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.alignItems="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