Flexible flexible box model CSS align-items property

##Example

Centerly align the items of the flexbox

element:

1. ##p

2. {

3. display

   :flex;

4. align

   -items:center;

5. }

         
     
    
   RED
    
   BLUE
    
   Green div with more content.
    
    
   注意: Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。
    
   注意: Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。
     

   Copy after login
Effect preview

Browser support

---

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

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

---

Definition and usage

The align-items property defines the alignment of flex items in the direction of the cross axis (vertical axis) of the current row of the flex container.

Tip:The align-items property can be overridden using the align-self property of each flex object element.

Attributes align-items 7.0 -webkit-

21.0	11.0	20.0	9.0	12.1

---

CSS 语法

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

Attribute value

##Inheritance: No Can be animated: No. Please refer to Version: CSS3 JavaScript Syntax:

Default:	stretch
	CSS3 animation properties, CSS3 animation examples.
	object. style.alignItems="center" Effect preview

##initial Set this property to its default value. See initial. ##More Flexible Flexible Box Model CSS For articles related to the align-items attribute, please pay attention to the PHP Chinese website!

Value	Description	Test
##stretch	default value. Items are stretched to fit the container.	Effect Preview
center	The item is located in the center of the container.	Effect preview
##flex-start	The item is at the beginning of the container.	Effect preview
##flex-end	The item is at the end of the container.	Effect preview
baseline	The project is located on the baseline of the container.	Effect Preview
	Effect preview
##inherit	Inherits this attribute from the parent element. See inherit.