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 屬性