Latest web development tutorials

HTML DOM Style alignContent property

Style Object Reference Style Objects

Examples

Align flexible <div> element items:

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

try it"

Definition and Usage

alignContent property aligned within the container (vertical) in the shaft when the unoccupied cross flexible container all the available space.

Tip: Use justifyContent property align the (horizontal) on the spindle.

Note: You must multiple line items within the container, this property in order to render the effect.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Chrome and Opera support alignContent property.


grammar

Back alignContent properties:

object .style.alignContent

Setting alignContent properties:

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

Property Value

描述
stretch 默认值。项目被拉伸以适应容器。
center 项目位于容器的中心。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的结尾。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

technical details

Defaults: stretch
return value: String that represents align-content element attributes.
CSS version CSS3


related articles

CSS Reference: align = left-Content attributes

HTML DOM STYLE Reference: alignItems property

HTML DOM STYLE Reference: alignSelf property

HTML DOM STYLE Reference: justifyContent property


Style Object Reference Style Objects