justify-content弹性盒子布局

初始HTML代码如下：

<div class="row">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

初始CSS代码如下：

* {
	margin: 0;
	padding: 0;
}
.row {
	width: 600px;
	height: 400px;
	border: 1px solid #000;
	margin: 50px auto;
	display: flex;
}
.row div {
	width: 150px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	color: #fff;
}
.row div:nth-child(1) {
	background-color: pink;

}
.row div:nth-child(2) {
	background-color: hotpink;
}
.row div:nth-child(3) {
	background-color: purple;
}

初始效果如下：

justify-content属性对齐主轴（水平方向）上的各项。
增加如下代码：

.row{
	justify-content: center;
}

效果如下：