It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The CSS Align-Items Property

Reading time 1 min
Published Aug 8, 2017
Updated Oct 15, 2019

Definition of align-items

The CSS text-align property is used to specify alignment for items located in a flex container:

Example
.flexcontainer {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: flex-start; /* Safari 7.0 and newer */
    display: flex;
    align-items: flex-start;
}

Introduced in CSS3, align-items belongs to the Flexbox layout. It can be neither inherited nor animated.

Tip: using the align-self property would override align-items.

Syntax rules for align-items

The syntax for the CSS align-items property is simple – all you need to define is one of the available property values:

align-items: value;

Property values

Value Description
stretch Default. Stretches the items to fit the container
center Positions the items at the center of the container
flex-start Positions the items at the beginning of the container
flex-end Positions the items at the end of the container
baseline Positions the items at the baseline of the container
initial Returns the default value of the property.
inherit Inherits the property from the parent element.

Browser support

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
20+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
20+
Browser image
Opera
12.1+
Browser image
Safari
9+