align-content弹性盒子布局

初始HTML代码如下：

<div class="row">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

初始CSS代码如下：

.row {
	width: 600px;
	height: 400px;
	border: 1px solid #000;
	margin: 50px auto;
	display: flex;
	/*flex-direction: row;
	flex-wrap: wrap;*/ /* 等价于下一行*/
	flex-flow: row wrap; /*align-content属性对单行弹性盒子模型无效（即：带有 flex-wrap: nowrap）*/
}
.row div {
	width: 150px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	color: #fff;
	margin: 10px;
}
.row div:nth-child(1) {
	background-color: pink;
}
.row div:nth-child(2) {
	background-color: hotpink;
}
.row div:nth-child(3) {
	background-color: purple;
}
.row div:nth-child(4) {
	background-color: deeppink;
}
.row div:nth-child(5) {
	background-color: blue;
}
.row div:nth-child(6) {
	background-color: skyblue;
}
.row div:nth-child(7) {
	background-color: pink;
}

初始效果如下：

容器内必须有多行的项目，align-content属性才能渲染出效果。
使用justify-content属性对齐主轴（水平）上的各项。
align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
使用align-content属性设置：

1. align-content: center; 每行互相紧挨（此处div设置有margin值），相对于容器居中对齐

.row{
	align-content: center; 
}

效果如下：

2. align-content:start;所有行从容器的起始边缘开始填充。

.row{
	align-content:start;
}

效果如下：

3. align-content:flex-end;所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

.row{
	align-content:flex-end;
}

效果如下：

4. align-content: space-between;所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。

.row{
	align-content: space-between;
}

效果如下：

5. align-content: space-around;所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

.row{
	align-content: space-around;
}

效果如下：