1.justify-content属性介绍
对容器进行display: flex布局之后，可通过justify-content来调整容器中子元素整体的布局的位置，其值分别有如下几个：
注：以下情况均由主轴为从左到右方向进行，其从下到上的主轴情况原理类似
- flex-start（默认值）
即默认状态下的在主轴的左边位置，页面代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
display: flex;
margin: 0px auto;
width: 800px;
height: 200px;
background-color: purple;
justify-content: flex-start;
}
.item {
background-color: red;
margin-left: 10px;
margin-top: 10px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
其效果如下：
justify-content: flex-start效果
- flex-end
其flex-end则是在主轴的右边位置，效果如下图所示：
justify-content: flex-end效果
-
center
设置为center值之后，其子元素整体的位置则是在主轴的中心位置，其效果如下：
justify-content：center效果 -
space-around
该值会将主轴上剩余空间平均的充斥在各个子元素的周围（类似于有相同的margin-left以及margin-right），效果如下图所示：
justify-content: space-around效果 - space-between
space-between与space-around造成的效果类似，稍有不同的为其第一个子项与最后一个和容器直接没有间隔，其效果如下：
justify-content：space-between效果
注其第一个之所以有是因为，我设置的margin-left：10px的原因
自己先给自己点个赞，冲啊！咱是最棒的！嘿嘿！观看的小可爱一起点个赞呗，求求了！
