CSS align-self attribute of Flexible elastic box model, flexiblealign-self

CSS align-self attribute of Flexible elastic box model, flexiblealign-self
Instance

Center alignment an item in an elastic object element:

1. # MyBlueDiv
2. {
3. Align-self: center;
4. }

Browser support for copying preview results

The number in the table indicates the version number of the first browser that supports this attribute.

The number following-webkit-,-ms-, or-moz-is the first version that supports this prefix attribute.

Attribute
Align-self	21.0	11.0	20.0	9.0 7.0-webkit-	12.1

Definition and usage

The align-self attribute defines the alignment of the flex subitem separately on the side axis (vertical axis ..

Note: The align-self attribute can override the align-items attribute of a flexible container.

Default Value:	Auto
Inheritance:	No
Animations:	No. SeeCSS3 animation attributes and CSS3 animation instances.
Version:	CSS3
JavaScript Syntax:	Object. Style. alignSelf = "center" effect Preview

 

CSS syntax align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; Attribute Value

Value	Description	Test
Auto	Default value. The element inherits the align-items attribute of its parent container. If there is no parent container, it is "stretch ".	Effect Preview
Stretch	Elements are stretched to fit the container.	Effect Preview
Center	The element is located in the center of the container.	Effect Preview
Flex-start	The element is at the beginning of the container.	Effect Preview
Flex-end	The element is at the end of the container.	Effect Preview
Baseline	The element is located on the basis of the container.	Effect Preview
Initial	Set this property to its default value. SeeInitial.	Effect Preview
Inherit	This attribute is inherited from the parent element. SeeInherit.