實例

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

div

{

display: flex;

justify-content: space-around;

}

復制 效果預覽

---

瀏覽器支持

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

緊跟在 -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 屬性對齊交叉軸上的各項（垂直）。

默認值：繼承：可動畫化：版本：JavaScript 語法：

flex-start

否

否。請參閱?CSS3動畫屬性、CSS3動畫實例。

CSS3

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。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Flexible 弹性盒子模型之CSS justify-content 属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。