Definition and Usage
The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the flex item's cross-axis margin is set to auto, then align-self is ignored.
- Initial auto
- Applies to flex items, including in-flow pseudo-elements
- Inherited no
- Media visual
- Computed Value auto computes to parent's align-items; otherwise as specified
- Animatable no
- Canonical order the unique non-ambiguous order defined by the formal grammar
Formal syntax: auto | flex-start | flex-end | center | baseline | stretch
align-self: auto align-self: flex-start align-self: flex-end align-self: center align-self: baseline align-self: stretch align-self: inherit
- Computes to parent's align-items value or stretch if the element has no parent.
- The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
- The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
- The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
- All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
- Flex items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints.
|Feature||Chrome||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic support||21.0-webkit||18.0 (18.0) (behind a pref)
|Not supported||12.10||Not supported|
|Feature||Android||Chrome for Android||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||NA||NA||NA||Not supported||12.10||Not supported|