CSS reference manual

CSS @rules

CSS attributes大全

CSS3 animation Attribute CSS3 align-items Attribute

CSS3 align-Usage and examples of the self property

The align-The self property specifies the default alignment for elements within a flex container.

The following table summarizes the usage context and version history of this property.

Default value:	auto
Applies to:	Flexible elements, including the pseudo-elements that flow in
Inheritance:	None
Animatable:	No.See also Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.alignItems="center"

align-self usage syntax

The syntax of this attribute is as follows:

align-self: auto | baseline | center | flex-start | flex-end | stretch | initial | inherit

The following example shows how to use align-self property.

Example

.flex-container　{
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;　
　　　　-webkit-align-items:　flex-start;
　　　　
　　　　display:　flex;
　　　　align-items:　flex-start;
}
.aligned　{
　　　　/*　Safari　*/
　　　　-webkit-flex:　1;　
　　　　-webkit-align-self: stretch;
　　　　
　　　　flex:　1;　
　　　　align-self: stretch;
}

Test to see‹/›

Attribute Value

The following table describes the value of this attribute.

Value	Description
auto	The element uses the calculated value of the align attribute of its parent element.-If items has no parent element, it uses stretch. This is the default value.
baseline	The element is at the baseline of the flex container.
center	The element is at the center of the flex container.
flex-start	The element is at the beginning of the flex container.
flex-end	The element is at the end of the flex container.
stretch	Stretch the element to fit the flex container.
initial	Set this property to its default value.
inherit	If specified, the associated elements will use the calculated value of the align attribute of its parent element.-self.

Browser Compatibility

align-browser compatibility of the self property, all major browsers support this property.

	Firefox 20+ Google Chrome21+ Internet Explorer 11+ Apple Safari 7+ ^-webkit- Opera 12.1+

Note: Apple Safari 7and higher versions to support the align-self property, but it needs-webkit-prefix, for example-webkit-align-self: center;

Please refer to the following tutorials:CSS Alignment.