justify-content

語法:

justify-content:flex-start | flex-end | center | space-between | space-around

預設值flex-start

適用於:flex容器

繼承性:無

動畫性:是

計算值:指定值

取值:

flex-start:
彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊,同時所有後續的伸縮盒項目與其前一個項目對齊。
flex-end:
彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊,同時所有後續的伸縮盒項目與其前一個項目對齊。
center:
彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊,同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距(如果剩餘空間是負數,則保持兩端相等長度的溢出)。
space-between:
彈性盒子元素會平均地分布在行裡。如果最左邊的剩餘空間是負數,或該行只有一個子元素,則該值等效於'flex-start'。在其它情況下,第一個元素的邊界與行的主起始位置的邊界對齊,同時最後一個元素的邊界與行的主結束位置的邊距對齊,而剩餘的伸縮盒項目則平均分布,並確保兩兩之間的空白空間相等。
space-around:
彈性盒子元素會平均地分布在行裡,兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩餘空間是負數,或該行只有一個伸縮盒項目,則該值等效於'center'。在其它情況下,伸縮盒項目則平均分布,並確保兩兩之間的空白空間相等,同時第一個元素前的空間以及最後一個元素後的空間為其他空白空間的一半。

說明:

設定或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。
  • 當彈性盒裡一行上的所有子元素都不能伸縮或已經達到其最大值時,這一屬性可協助對多餘的空間進行分配。當元素溢出某行時,這一屬性同樣會在對齊上進行控制。
  • 對應的腳本特性為justifyContent

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-10.0 2.0-21.0 4.0-20.0 6.0 15.0+-webkit- 6.0-6.1 2.1-4.3 18.0-19.0
11.0+ 22.0+ 21.0+-webkit- 6.1+-webkit- 17.0+ 7.0+-webkit- 4.4+ 20.0+-webkit-
29.0+ 9.0+ 9.0+ 28.0+

示例:

本頁最後更新時間:

2015.8.10