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
