Flexible flexible box model CSS align-items property-CSS Tutorial-php.cn

Flexible flexible box model CSS align-items property

高洛峰

Release： 2017-02-23 09:58:55

Original

1908 people have browsed it

##Example

Centerly align the items of the flexbox

element:

##p
{
display
: flex;
align
-items:center;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

#main div {
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>
</html>

Copy after login

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 语法

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.