Latest web development tutorials

HTML DOM Style alignContent 屬性

Style 對象參考手冊 Style對象

實例

對齊靈活的<div> 元素的各項:

document.getElementById("myDIV").style.alignContent="center";

嘗試一下»

定義和用法

alignContent 屬性在當靈活容器內的各項沒有佔用交叉軸上所有可用的空間時對齊容器內的各項(垂直)。

提示:使用justifyContent屬性對齊主軸上的各項(水平)。

注意:容器內必須有多行的項目,該屬性才能渲染出效果。


瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Chrome 和Opera 支持alignContent 屬性。


語法

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


相關文章

CSS參考手冊: align-content屬性

HTML DOM STYLE參考手冊: alignItems屬性

HTML DOM STYLE參考手冊: alignSelf屬性

HTML DOM STYLE參考手冊: justifyContent屬性


Style 對象參考手冊 Style對象