CSS align-self Property
Example
Center-align a single item within a flex container:
#myBlueDiv {
align-self: center;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers following -webkit-, -ms-, or -moz- indicate the first version that supported the prefixed property.
| Property | Chrome | Edge | Firefox | IE | Safari |
|---|---|---|---|---|---|
| align-self | 21.0 | 11.0 | 20.0 | 9.0 <br>7.0 -webkit- | 12.1 |
Definition and Usage
The align-self property specifies the alignment for the selected item inside the flexible container on the cross-axis (vertical axis).
Note: The align-self property overrides the align-items value of the flex container.
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | no. See animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.alignSelf="center" Try it |
CSS Syntax
Property Values
| Value | Description | Test |
|---|---|---|
| auto | Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container. | Test » |
| stretch | The element is stretched to fit the container. If the cross-size property is set to 'auto', it will make the margin box as large as possible within the line while respecting the 'min/max-width/height' properties. | Test » |
| center | The element is centered in the container. The flex item is centered within the line on the cross-axis. If the line is smaller than the item, it will overflow equally in both directions. | Test » |
| flex-start | The element is aligned at the start of the container. The flex item's cross-start margin edge is flushed with the line's cross-start edge. | Test » |
| flex-end | The element is aligned at the end of the container. The flex item's cross-start margin edge is flushed with the line's cross-end edge. | Test » |
| baseline | The element is aligned at the baseline of the container. If the flex item's inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment. | Test » |
| initial | Sets this property to its default value. See initial | Test » |
| inherit | Inherits this property from its parent element. See inherit |
Related Articles
CSS Reference Manual: align-content Property
CSS Reference Manual: align-items Property