1.介绍
align-content属性与align-items属性作用类似，其中区别是align-items作用于flex容器中子项目不换行的情况，而align-content则是作用于flex容器换行的情况，对于align-items的用法可参考flex布局之align-items属性详解，其中常用的值会比align-items中多一点，功能与justify-content中的值类似，对于justify-content的用法可参考flex布局之justify-content属性详解，algin-content作用于align-items作用一样，均是改变flex容器中子项目在侧轴的位置，其中常用的值有一下几个：（注：以下演示均以侧轴为从上到下的方向）
- flex-start
即在侧轴的开始位置（上），html代码如下：
<!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;
flex-wrap: wrap;
align-content: flex-start;
}
.item {
background-color: red;
margin-left: 10px;
margin-top: 10px;
width: 250px;
height: 60px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
其效果如图所示：
align-content：flex-start效果
-
flex-end
即在侧轴的末尾位置（下），效果如下图所示:
algin-content: flex-end效果 -
center
即在侧轴的中间位置，效果如下图所示：
align-content: center效果 -
space-around
剩余空间被平均的分配在侧轴方向上的每个子项目，效果如下图所示：
align-content: space-around效果 - space-between
与space-around类似,不同的是最开始和最末尾的子项目分别在其上边和下边没用空间，效果如下图所示：
align-content: space-between效果
（注：图中最上边的空间是由于设置了margin-top：10px所导致）
自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！
