CSS3 align-self Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The align-self property specifies the default alignment for items within the flex container.
The following table summarizes the usages context and the version history of this property.
| Default value: | auto |
|---|---|
| Applies to: | Flex items, including in-flow pseudo-elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the align-self property in action.
Example
Try this code ».flex-container {
/* Safari */
display: -webkit-flex;
-webkit-align-items: flex-start;
/* Standard syntax */
display: flex;
align-items: flex-start;
}
.aligned {
/* Safari */
-webkit-flex: 1;
-webkit-align-self: stretch;
/* Standard syntax */
flex: 1;
align-self: stretch;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
auto |
The element takes the computed value of its parent element align-items property or stretch if it has no parent. This is default value. |
baseline |
The element is positioned at the baseline of the flex container. |
center |
The element is positioned at the center of the flex container. |
flex-start |
The element is positioned at the beginning of the flex container. |
flex-end |
The element is positioned at the end of the flex container. |
stretch |
The element is stretched to fit the flex container. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element align-self property. |
Browser Compatibility
The align-self property is supported in all major modern browsers.
 |
Basic Support—
|
Note: Apple Safari version 7 and above supports the align-self property but require -webkit- prefix, like this -webkit-align-self: center;
Further Reading
See tutorial on: CSS Alignment.
Related properties: align-content, align-items, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.
