Style justifyContent 屬性

定義和用法

當項目未使用主軸（水平）上的所有可用空間時， justifyContent 屬性對齊彈性容器的項目。

提示：請使用 alignContent 屬性在橫軸（垂直）上對齊項目。

另請參閱：

CSS 參考手冊：justify-content 屬性

實例

在彈性的 <div> 元素的項目之間留出一些空間：

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

親自試一試

語法

返回 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

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 12.0 支持 9.0 支持

相關頁面

HTML DOM STYLE 參考手冊：alignContent 屬性

HTML DOM STYLE 參考手冊：alignItems 屬性

HTML DOM STYLE 參考手冊：alignSelf 屬性