CSS align-self Property
Center-align an item within a flexible object element:
Definition and Usage
The numbers in the table indicate the version number of the first browser that supports this attribute.
The number immediately after -webkit-, -ms- or -moz- is the first version that supports this prefix attribute.
align-self attribute defines how the flex children are aligned individually in the lateral (vertical) direction.
Note: The align-self attribute overrides the align-items attribute of the flexible container.
7.0 - webkit-
|auto||The default value. An element inherits the align-items property of its parent container. "Stretch" if there is no parent container.|
element is stretched to fit the container.
If the attribute value of the specified side axis size is 'auto', its value will make the size of the margin box of the item as close to the size of the line as possible, but at the same time it will follow the 'min /max-width /height' limits.
element is in the center of the container.
The flexible box element is centered on the side axis (longitudinal axis) of the row. (If the size of the row is smaller than the size of the flexible box element, the same length will overflow in both directions).
element is at the beginning of the container.
The boundary of the starting position of the lateral axis (vertical axis) of the flexible box element is close to the starting boundary of the lateral axis of the row.
element is at the end of the container.
The boundary of the starting position of the side axis (longitudinal axis) of the flexible box element is close to the end axis of the side axis of the row.
element is on the baseline of the container.
If the inline axis and side axis of the flexible box element are the same, this value is equivalent to 'flex-start'. In other cases, this value will participate in baseline alignment.
|initial||Set this property to its default value.|
|inherit||Inherit this attribute from the parent element.|