CSS align-selfProperty
Example
Center-align an item within a flex container element:
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -ms-, or -moz- specify the first version that supported the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| align-self | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- |
12.1 |
Definition and Usage
The align-self property defines the alignment of a flex item individually along the cross axis (vertical axis).
Note:The align-self property can override the align-items property of a flex container.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | No. SeeAnimatable。 |
| version: | CSS3 |
| JavaScript Syntax: | object.style.alignSelf="center" Try it Yourself |
CSS Syntax
Property value
| Value | Description | Testing |
|---|---|---|
| auto | Default value. The element inherits the align-items property of its parent container. If there is no parent container, it is "stretch". | Test » |
| stretch | The element is stretched to fit the container. If the property specifying the cross-axis size is 'auto', its value makes the item's margin box size as close as possible to the size of the line, while also respecting the constraints of the 'min/max-width/height' properties. |
Test » |
| center | The element is positioned at the center of the container. The flex item is centered along the cross axis (vertical axis) of the line. (If the line's size is smaller than the flex item's size, it overflows equally in both directions). |
Test » |
| flex-start | The element is positioned at the start of the container. The cross-start edge of the flex item's cross axis (vertical axis) is flush with the cross-start edge of the line. |
Test » |
| flex-end | The element is positioned at the end of the container. The cross-start edge of the flex item's cross axis (vertical axis) is flush with the cross-end edge of the line. |
Test » |
| baseline | The element is positioned on the baseline of the container. If the flex item's inline axis and cross axis are the same, this value is equivalent to 'flex-start'. In other cases, this value participates in baseline alignment. |
Test » |
| initial | Sets this property to its default value. Seeinitial。 | Test » |
| inherit | Inherits this property from the parent element. Seeinherit。 |
Related Articles
CSS Reference Manual:align-content property
CSS Reference Manual:align-items Property
other extensions