CSS justify-content 屬性

定義和用法

justify-content 屬性（水平）對齊彈性容器的項目，當項目不占用主軸上所有可用空間時。

提示：請使用 align-items 屬性 屬性垂直對齊項目。

另請參閱：

CSS 教程：CSS flexbox

CSS 教程：CSS Grid

CSS 參考手冊：align-content 屬性

CSS 參考手冊：align-items 屬性

CSS 參考手冊：align-self 屬性

HTML DOM 參考手冊：justifyContent 屬性

實例

在容器中央對齊彈性項目：

div {
  display: flex;
  justify-content: center;
}

親自試一試

可以在頁面下方找到更多 TIY 實例。

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。

技術細節

默認值： flex-start
繼承： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.justifyContent="space-between"

更多實例

實例

在容器的開頭對齊彈性項目（默認）：

div {
  display: flex;
  justify-content: flex-start;
}

親自試一試

實例

在容器末尾對齊彈性項目：

div {
  display: flex;
  justify-content: flex-end;
}

親自試一試

實例

在行之間顯示帶有間隔的彈性項目：

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

親自試一試

實例

在行之前、行之間和行之后顯示帶有間隔的彈性項目：

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

親自試一試

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

跟隨 -webkit-或 -moz- 的數字規定使用前綴的首個版本。

屬性 Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0