Latest web development tutorials

HTML DOM Style justifyContent 屬性

Style 對象參考手冊 Style對象

實例

在靈活的<div> 元素的各項周圍留有空白:

document.getElementById("main".style.justifyContent="space-between";

嘗試一下»

定義和用法

justifyContent 在當靈活容器內的各項沒有佔用主軸上所有可用的空間時對齊容器內的各項(水平)。

提示:使用alignContent屬性對齊交叉軸上的各項(垂直)。


瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Firefox、Opera 和Chrome 支持justify-content 屬性。


語法

返回justifyContent 屬性:

object .style.justifyContent

設置justifyContent 屬性:

object .style.justifyContent="flex-start|flex-end|center|space-between|space-around|initial|inherit"

屬性值

描述
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

技術細節

默認值: flex-start
返回值: 字符串,表示元素的justify-content 屬性。
CSS 版本 CSS3


相關文章

CSS參考手冊: justify-content屬性

HTML DOM STYLE參考手冊: alignContent屬性

HTML DOM STYLE參考手冊: alignItems屬性

HTML DOM STYLE參考手冊: alignSelf屬性


Style 對象參考手冊 Style對象