Contents
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:
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 DataCamp](https://assets.bitdegree.org/online-learning-platforms/storage/media/datacamp-logo-5f96bfc70113e.o.png)
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
![Udacity Udacity](https://assets.bitdegree.org/online-learning-platforms/storage/media/udacity-review-logo-small.o.png)
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
![Udemy Udemy](https://assets.bitdegree.org/online-learning-platforms/storage/media/udemy-logo-small.o.png)
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free 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](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
![Browser image](https://www.bitdegree.org/learn/assets/browsers/edge-logo.jpg)
Edge
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
![Browser image](https://www.bitdegree.org/learn/assets/browsers/ie-logo.jpg)
IE
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
Mobile browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)