🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

The CSS Align-Self Property

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

Using the align-self property

If you're using the align-items property on a specific Flexbox container and you wish to align some items differently, you can override the container alignment by using the align-self property for one or multiple individual items:

Example
div {
    -webkit-align-self: center; /* Safari 7.0 and newer */
    align-self: center;
}

CSS align-self property syntax

The syntax requirements are simple. After you define the property, you need to assign one of the available property values:

align-self: value;

You can find all the property values available for use with CSS align-self in the table below.

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
auto The default value. The element will inherit its parent container's align-items property value, or be stretched if it has no parent container
stretch Stretches the elements to fit the flex container
center Positions the element at the start of the flex container
flex‑start Positions the element at the start of the flex container
flex-end Positions the element at the end of the flex container
baseline Positions the element at the baseline of the flex container
initial Sets the property to the default value
inherit Inherits the property from the parent element

Note: just like align-items, align-self cannot be inherited or animated.

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+