HTML DOM Style justifyContent 屬性
實例
在靈活的<div> 元素的各項周圍留有空白:
document.getElementById("main".style.justifyContent="space-between";
嘗試一下»
定義和用法
justifyContent 在當靈活容器內的各項沒有佔用主軸上所有可用的空間時對齊容器內的各項(水平)。
提示:使用alignContent屬性對齊交叉軸上的各項(垂直)。
瀏覽器支持
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屬性