Style alignContent 屬性

定義和用法

當項目未使用橫軸上（垂直）的所有可用空間時，alignContent 屬性對齊彈性容器的項目。

提示：請使用 justifyContent 屬性 在主軸上（水平）對齊項目。

注釋：必須有多行項目才能使此屬性生效。

實例

將彈性 <div> 元素的項目放置在留有空間的兩行之間：

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

親自試一試

語法

返回 alignContent 屬性：

object.style.alignContent

設置 alignContent 屬性：

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

屬性值

值 描述
stretch 默認值。行拉伸以占據剩余空間。
center 項目位于容器的中心。
flex-start 項目位于容器的開頭。
flex-end 項目位于容器的末端。
space-between 項目位于留有空間的行間。
space-around 項目的行前、行間、行后均留有空白。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： stretch
返回值： 字符串，表示元素的 align-content 屬性。
CSS 版本： CSS3

瀏覽器支持

alignContent 是 CSS3 (1999) 特性。

所有瀏覽器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
支持 支持 支持 支持 支持 11

相關頁面

CSS 參考手冊：align-content 屬性

HTML DOM STYLE 參考手冊：alignItems 屬性

HTML DOM STYLE 參考手冊：alignSelf 屬性

HTML DOM STYLE 參考手冊：justifyContent 屬性