flex布局 父元素属性之 align-content 子元素在侧轴上的排列方式（多行子元素）

align-content

align-content：设置多行子元素在侧轴上（默认侧轴为y轴）的排列方式
注意：该属性只对父元素中有换行情况的子元素有效，即父元素代码中有“ flex-wrap：wrap；”，才会对子元素有效

align-content的属性值：

属性值	含义
flex-start	子元素在侧轴的头部开始排列 （默认值）
flex-end	子元素在侧轴的尾部开始排列
center	子元素在侧轴上居中显示
space-around	子元素在侧轴上平分剩余空间
space-between	子元素线贴着侧轴的两边，再平分剩余空间
stretch	设置子元素高度，平分父元素高度

---

对以上几个属性值进行举例解释（以y轴为侧轴为列）：

flex-start

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
</div>
<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-wrap: wrap;	/* 有了换行,故侧轴上的排列方式用align-content */
				align-content: flex-start;
			}
			div span{
				width: 150px;
				height: 100px;
				background: skyblue;
				margin: 10px;
			}
		</style>

运行结果：子元素从侧轴的头部开始排列

flex-end

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
</div>
<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-wrap: wrap;	
				align-content: flex-end;
			}
			div span{
				width: 150px;
				height: 100px;
				background: skyblue;
				margin: 10px;
			}
		</style>

运行结果：子元素从侧轴的尾部开始排列

center

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
</div>
<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-wrap: wrap;	
				align-content: center;
			}
			div span{
				width: 150px;
				height: 100px;
				background: skyblue;
				margin: 10px;
			}
		</style>

运行结果：子元素在侧轴上居中对齐

space-around

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
</div>
<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-wrap: wrap;	
				align-content: space-around;
			}
			div span{
				width: 150px;
				height: 100px;
				background: skyblue;
				margin: 10px;
			}
		</style>

运行结果：子元素在侧轴上平分剩余空间

space-between

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
</div>
<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-wrap: wrap;	
				align-content: space-between;
			}
			div span{
				width: 150px;
				height: 100px;
				background: skyblue;
				margin: 10px;
			}
		</style>

运行结果：子元素先贴着侧轴的两边，再平分侧轴上的剩余空间

stretch

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
</div>
<style type="text/css">
			div{
				display: flex;	
				width: 800px;
				height: 400px;
				background-color: orange;
				flex-wrap: wrap;	
				align-content: stretch;
			}
			div span{
				width: 150px;
				height: 50px; 
				background: skyblue;
				margin: 0 10px;
			}
		</style>

运行结果：除去子元素所占高度，再平分父元素高度
上述如果没有给子元素设置高度，运行结果为：（没有给子元素设置高度，这两行子元素平分父元素高度）