CSS justify-content 屬性

CSS 參考手冊 CSS 參考手冊


實例

在彈性盒對象的 <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 屬性對齊交叉軸上的各項(垂直)。

默認值: flex-start
繼承:
可動畫化: 否。請參閱 可動畫化(animatable)
版本: 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


相關文章

CSS 參考手冊:align-content 屬性

CSS 參考手冊:align-items 屬性

CSS 參考手冊:align-self 屬性


CSS 參考手冊 CSS 參考手冊