Similar to the align-items property, the align-self property aligns the flex items along the cross axis(vertical by default) within the flex container. But, instead of aligning all flex items, it aligns only the specified item(s).
The align-self property always overrides the align-items property.
In the example below, we have used align-self: center; for the second flex item. This means that this item will be aligned at the center of the cross axis. As cross axis is vertical by default. Therefore, this item will be vertically centered within its flex container.
Example:
#item2{
align-self: center;
}
The align-self: flex-start; aligns the specified flex item at the beginning of the cross-axis. As cross-axis is vertical by default. Therefore, the specified flex item will be aligned at the top of the flex container. See the example below:
Example:
#item2{
align-self: flex-start;
}
The align-self: flex-end; aligns the specified flex item at the end of the cross-axis. As cross-axis is vertical by default. Therefore, the specified flex item will be aligned at the bottom of the flex container. See the example below:
Example:
#item2{
align-self: flex-end;
}
The align-self: baseline; aligns the specified flex item at its baseline. The baseline is a hypothetical horizontal line upon which all the letters sit. So the specified flex item will be aligned taking this line as a reference. See the example below:
Example:
#item2{
align-self: baseline;
}
The align-self: stretch; stretches the specified flex item to the full length of the cross-axis. As cross-axis is vertical by default. Therefore, the specified flex item stretches vertically to cover the full height of its flex container. See the example below:
Example:
#item2{
align-self: stretch;
}
CSS Syntax
The align-self property has the following syntax:
align-self: flex-start|flex-end|center|baseline|stretch|initial|inherit;
Property Values
The align-self property accepts the following values:
| flex-start | Aligns the specified flex item at the beginning of the flex container. |
| flex-end | Aligns the specified flex item at the end of the flex container. |
| center | Aligns the specified flex item in the center of the flex container. |
| baseline | Aligns the specified flex item at their baseline. The baseline is a hypothetical line upon which all the letters sit. |
| stretch | This is the default value. The specified flex item stretches along the cross-axis to cover the full height of the flex container. |
| initial | Sets the align-self property to its default value(stretch). |
| inherit | Inherits the align-self property from the parent element. |
General Info
| Default Value | stretch |
| Inherited | No |
| JavaScript Usage | element.style.alignSelf = “flex-end” |
