align-content:space-between 效果演示

align-content

属性取值:

flex-start（子元素集中在侧轴起点，多余或溢出的空间位于侧轴终点）
flex-end（子元素集中在侧轴终点，多余或溢出的空间位于侧轴起点）
center（子元素集中在侧轴的中央，多余或溢出的空间在两侧平均分配）
space-between（多余的空间由中间的元素平均分配，并确保两两之间的空白空间相等）
space-around（所有子元素平均分配剩余空间）
stretch（拉伸行，并占满剩余空间）

HTML代码:

<div class="father">
 <div class="box1">1</div>
 <div class="box2">2</div>
 <div class="box3">3</div>
 <div class="box1">4</div>
 <div class="box1">5</div>
</div>

CSS代码:

.father  {
	color: #fff;
	text-align: center;
	font: bold 36px/36px monaco;
	border: 1px solid #ef39d5;
}

.father  {
	width: 220px;
	height: 200px;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}

.father > div  {
	width: 100px;
}
	
.box1  {
	background: #7f3ffd;
}

.box2  {
	background: #ef39d5;
}

.box3  {
	background: #1bb9f1;
}

运行效果: