justify-content:space-between 效果演示

justify-content

属性取值:

flex-start（自动换行，子元素多行排列，下一行的位置与侧轴的方向相反）
flex-end（子元素集中在主轴终点，多余或溢出的空间位于主轴起点）
center（子元素集中在主轴的中央，多余或溢出的空间在两侧平均分配）
space-between（多余的空间由中间的元素平均分配，并确保两两之间的空白空间相等）
space-around（所有子元素平均分配剩余空间）

HTML代码:

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

CSS代码:

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

.father  {
	width: 180px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border: 1px solid #ef39d5;
}

.father > div  {
	width: 70px;
}
	
.box1  {
	background: rgb(127, 63, 253);
}

.box2  {
	background: rgb(239, 57, 213);
}

.box3  {
	background: rgb(27, 185, 241);
}

运行效果: