align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。

1
2
3
4
5
6
7
8
<style type="text/css">
	.main {
	    -webkit-flex-wrap: wrap;
	    flex-wrap: wrap;
	    height: 500px;
	}
	.child {
	    width: 20%;
	    height: 100px;
	}

	.align-content.flex-start{
		/* 各行向弹性盒容器的起始位置堆叠 */
		align-content: flex-start;
	}
	.align-content.flex-end{
		/*  各行向弹性盒容器的结束位置堆叠 */
		align-content: flex-end;
	}
	.align-content.center{
		/* 各行向弹性盒容器的中间位置堆叠 */
		align-content: center;
	}
	.align-content.space-between{
		/* 各行在弹性盒容器中平均分布 */
		align-content: space-between;
	}
	.align-content.space-around{
		/* 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半 */
		align-content: space-around;
	}
	.align-content.stretch{
		/* 默认。各行将会伸展以占用剩余的空间 */
		align-content: stretch;   
	}
</style>



<div class="main align-content">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
</div>

查看基础样式