justify-content 屬性
語法:
justify-content:flex-start | flex-end | center | space-between | space-around
默認值:flex-start
適用于:彈性盒模型容器
繼承性:無
屬性用于調整主軸上伸縮項目的位置。它指定子元素間多余的空白要如何處理(在你讓子元素與其外邊距占滿主軸上的所有空間的時候,這個屬性沒有作用)
取值:
flex-start:
彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊,同時所有后續的伸縮盒項目與其前一個項目對齊。
flex-end:
彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊,同時所有后續的伸縮盒項目與其前一個項目對齊。
center:
彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊并在行中居中對齊,同時第一個元素與行的主起始位置的邊距等同與最后一個元素與行的主結束位置的邊距(如果剩余空間是負數,則保持兩端相等長度的溢出)。
space-between:
彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負數,或該行只有一個子元素,則該值等效于'flex-start'。在其它情況下,第一個元素的邊界與行的主起始位置的邊界對齊,同時最后一個元素的邊界與行的主結束位置的邊距對齊,而剩余的伸縮盒項目則平均分布,并確保兩兩之間的空白空間相等。
space-around:
彈性盒子元素會平均地分布在行里,兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數,或該行只有一個伸縮盒項目,則該值等效于'center'。在其它情況下,伸縮盒項目則平均分布,并確保兩兩之間的空白空間相等,同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
說明:
設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。
當彈性盒里一行上的所有子元素都不能伸縮或已經達到其最大值時,這一屬性可協助對多余的空間進行分配。當元素溢出某行時,這一屬性同樣會在對齊上進行控制。
對應的腳本特性為justifyContent。