CSSjustify-content屬性

CSS 參考手冊CSS 參考手冊

實例

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

div
{
display: flex;
justify-content: space-around;
}

瀏覽器支持

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

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

屬性     
justify-content29.0
21.0 -webkit-		11.028.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 參考手冊