1. 介绍
align-items类似于justify-content可以设置子元素的显示的位置，不同的是justify-content设置的是子元素在主轴方向上的，而align-items则是设置子元素在侧轴中的位置，相对justify-content属性了解的可参考flex布局之justify-content属性详解，那么接下来就让我来介绍align-items的值。（注：align-items生效的前提示flex容器不换行，以下演示均已侧轴为从上到下方向）
- flex-start（默认）
即默认状态下的在侧轴的上边位置，页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
display: flex;
margin: 0px auto;
width: 800px;
height: 400px;
background-color: purple;
align-items: flex-start;
}
.item {
background-color: red;
margin-left: 10px;
margin-top: 10px;
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">1</div>
<div class="item">2</div>
</div>
</body>
</html>
其效果如下：
align-items: flex-start效果
-
flex-end
其flex-end则是在侧轴的下边位置，效果如下图所示：
align-items: flex-end效果 -
center
设置为center值之后，其子元素整体的位置则是在侧的中心位置，其效果如下：
align-items: center效果
自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！
