Flexible flexible box model CSS align-items property

##Example

Centerly align the items of the flexboxe388a4556c0f65e1904146cc1a846bee 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 属性支持该属性。
   
   
   

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.

Attributesalign-items7.0 -webkit-

---

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.

21.0	11.0	20.0	9.0	12.1

##Inheritance: NoCan be animated: No. Please refer to Version: CSS3JavaScript Syntax:

 

---

CSS 语法

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

Attribute value

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

##initialSet 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.