CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS3 align-self attribute CSS3 align-content attribute

CSS3 align-Usage and examples of the 'items' property

align-The 'items' 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:	stretch
Applies to:	Flexible container
Inheritance:	None
Animated:	No.Please see Animation properties.
Version:	CSS3new feature
JavaScript syntax:	object.style.alignItems="center"

align-items syntax usage

The syntax of this property is as follows:

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

The following examples show the align being used.-items property.

Example

　.flex-container　{
　　　　　　　　　　　/*　Safari　*/
　　　　　　　　　　　display:　-webkit-flex;　
　　　　　　　　　　　-webkit-align-items:　center;
　　　　　　　　　　　
　　　　　　　　　　　display:　flex;
　　　　　　　　　　　align-items:　center;
　　　}

Test and see‹/›

Attribute value

The following table describes the values of this property.

Value	Description
baseline	The element is located at the baseline of the flexible container.
center	The element is located at the center of the flexible container.
flex-start	The element is located at the beginning of the flex container.
flex-end	The element is located at the end of the flex container.
stretch	Stretch the element to fit the flexible container. The available space is evenly distributed among all elements. This is the default value.
initial	Set this property to its default value.
inherit	If specified, the associated elements will use the align of their parent element's property.-items values.

Browser compatibility

align-Browser compatibility of the items 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-items property, but it needs-webkit-prefix, for example-webkit-align-items: center;