Flexible 彈性盒子模型之CSS justify-content 屬性

實例

在彈性盒對象的 <div> 元素中的各項周圍留有空白：

1. div
2. {
3. display: flex;
4. justify-content: space-around;
5. }

複製

效果預覽

---

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器的版本號。

緊跟在 -webkit-, -ms- 或 -moz- 後的數字爲支持該前綴屬性的第一個版本。

屬性
justify-content	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

---

定義和用法

justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

提示：使用 align-content 屬性對齊交叉軸上的各項（垂直）。

默認值：	flex-start
繼承：	否
可動畫化：	否。請參閱 CSS3動畫屬性、CSS3動畫實例。
版本：	CSS3
JavaScript 語法：	object.style.justifyContent="space-between" 效果預覽

 

---

CSS 語法

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

屬性值

值	描述	測試
flex-start	默認值。項目位於容器的開頭。	效果預覽
flex-end	項目位於容器的結尾。	效果預覽
center	項目位於容器的中心。	效果預覽
space-between	項目位於各行之間留有空白的容器內。	效果預覽
space-around	項目位於各行以前、之間、以後都留有空白的容器內。	效果預覽
initial	設置該屬性爲它的默認值。請參閱 initial。	效果預覽
inherit	從父元素繼承該屬性。請參閱 inherit。