Style alignContent 屬性
示例
透過在行之間新增空間來定位彈性 <div> 元素的項
document.getElementById("main").style.alignContent = "space-between";自己動手試一試 »
描述
alignContent 屬性在彈性容器的項未完全佔用交叉軸（垂直方向）上的所有可用空間時，對這些項進行對齊。
提示：使用 justifyContent 屬性可以在主軸（水平方向）上對齊項。
注意：此屬性需要有多行項才能生效。
語法
返回 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 |
| 是 | 是 | 是 | 是 | 是 | 11 |
相關頁面
CSS 參考：align-content 屬性
HTML DOM STYLE 參考：alignItems 屬性
HTML DOM STYLE 參考：alignSelf 屬性
HTML DOM STYLE 參考：justifyContent 屬性
