space-around; 项目位于各行之前、之间、之后都留有空白的容器内。
Pasted Graphic.png
justify-content: space-between 项目位于各行之间留有空白的容器内
image.png
justify-content: center 项目居中显示
image.png
flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
image.png
flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
image.png
补充1
align-content是对应的竖直分布的
相关的属性和justify-content 一致
补充2
align-content 和 align-items区别
<div class="child-1">
<div class="child-2">
</div>
<div class="child-2">
</div>
</div>
<style type="text/css">
*{
margin:0px;
padding: 0px;
}
div{
border: 1px solid #0f0f0f;
}
.child-1{
margin: 30px auto;
display: flex;
width: 100px;
height: 60px;
justify-content: space-around;
align-content: center;
}
.child-2{
width: 30px;
height: 20px;
}
</style>
image.png
如果.child-1改用align-items:center;则会达到预期的效果
image.png
image.png
