CSS align-self property
CSS reference manual
Definitions and usages
The align-self property defines the alignment of flex children individually in the direction of the side axis (vertical axis).
Note: The align-self property rewrites the align-items property of a flexible container.
| Default: | auto |
|---|---|
| Inherited: | Whether |
| Animated: | Whether. See Animation . |
| Version: | CSS3 |
| JavaScript syntax: | object .style.alignSelf="center" |
CSS syntax
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
Parameters
| value | describe | test |
|---|---|---|
| auto | Defaults.The element inherits its parent container's align-items attribute.If there is no parent container, "Stretch". | test " |
| stretch | The element is stretched to accommodate the container. | test " |
| center | The element is located at the center of the container. | test " |
| flex-start | The element is located at the beginning of the container. | test " |
| flex-end | The element is located at the end of the container. | test " |
| baseline | The element is located on the baseline of the container. | test " |
| initial | Set this property for its default value.See initial 。 | test " |
| inherit | Inheriting this property from the parent element.See inherit 。 |
Center to align an item within an elastic object element:
#myBlueDiv
{
align-self:center;
}
{
align-self:center;
}
Try it out . . .
Browser support
The numbers in the table support the version number of the first browser for this property.
The number immediately after -webkit-, -ms - or -moz - is the first version that supports the prefix property.
| Property | |||||
|---|---|---|---|---|---|
| align-self | 21.0 | 11.0 | 20.0 |
9.0
7.0 -webkit- |
12.1 |
Related articles
CSS Reference Manual: align-content property
CSS Reference Manual: align-items property