🚨 $100K in Sight: Follow Bitcoin’s Final Push Live! TRACK NOW

Code has been added to clipboard!

The CSS Align-Items Property

Reading time 1 min
Published Aug 8, 2017
Updated Jan 21, 2020

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;

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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+