space-around; 項目位于各行之前、之間唯笙、之后都留有空白的容器內(nèi)霍转。
Pasted Graphic.png
justify-content: space-between 項目位于各行之間留有空白的容器內(nèi)
image.png
justify-content: center 項目居中顯示
image.png
flex-start：彈性盒子元素將向行起始位置對齊臭杰。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊瞬场，同時所有后續(xù)的伸縮盒項目與其前一個項目對齊。
image.png
flex-end：彈性盒子元素將向行結(jié)束位置對齊。該行的第一個子元素的主結(jié)束位置的邊界將與該行的主結(jié)束位置的邊界對齊蟀悦，同時所有后續(xù)的伸縮盒項目與其前一個項目對齊。
image.png
補(bǔ)充1
align-content是對應(yīng)的豎直分布的
相關(guān)的屬性和justify-content 一致
補(bǔ)充2
align-content 和 align-items區(qū)別
<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;則會達(dá)到預(yù)期的效果
image.png
image.png
