[ css 弹性盒子模型 align-item 属性 ] 弹性盒子模型flex布局中align-item属性讲解及实例演示的区别
说明：
本属性适用于：flex容器
定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
实例:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>align-items_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
font: bold 20px/1.5 georgia, simsun, sans-serif;
}
.box {
display: -webkit-flex;
display: flex;
width: 200px;
height: 100px;
margin: 0;
padding: 0;
border-radius: 5px;
list-style: none;
background-color: #eee;
}
.box li {
margin: 5px;
border-radius: 5px;
background: #aaa;
text-align: center;
}
.box li:nth-child(1) {
padding: 10px;
}
.box li:nth-child(2) {
padding: 15px 10px;
}
.box li:nth-child(3) {
padding: 20px 10px;
}
#box {
-webkit-align-items: flex-start;
align-items: flex-start;
}
#box2 {
-webkit-align-items: flex-end;
align-items: flex-end;
}
#box3 {
-webkit-align-items: center;
align-items: center;
}
#box4 {
-webkit-align-items: baseline;
align-items: baseline;
}
#box5 {
-webkit-align-items: strecth;
align-items: strecth;
}
</style>
</head>
<body>
<h1>align-items示例：</h1>
<h2>align-items:flex-start</h2>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>