CSS align-self Property

CSS align-self Property


CSS align-self
The align-items property applies the alignment to all of the flex items.
But an individual item can specify its own individual alignment that overrides what was set on the container with the align-self property.
Syntax - 
align-self: values;
Now we will see the values -
1. auto
Thi is by default set to the property the element inherits its parent container's align-items property, or "stretch" if it has no parent container
 2. stretch 
Items are stretched along the row axis to fill the entire width of the cell. This is the default
3. start 
Items are aligned with the starting edge of the cell along the row axis
4. End
Items are aligned with the ending edge of the cell along the row axis 
5. Center
Items are centered along the row axis in their cells.
Now we will see Example -
Example - 
Output  -
As we can see in the output one content box is not following the other property because of align-self property.