What is CSS align-content attribute?

CSS Reference Manual
CSS Attributes

The best CSS align-content attribute Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Definition and Usage,CSS Syntax,Defaults,related articles,

CSS align-content attribute

Previous: CSS Animation

Next: CSS align-items property

CSS Reference

Examples

Align the elastic box <div> element items:

div
{
display: flex;
flex-flow: row wrap;
align-content:space-around;
}

Browser Support

Figures in the table represent the first browser to support the property version number.

Immediately following the digital -webkit-, -ms- or -moz- after the first version to support the prefix property.

Attributes
align-content	21.0	11.0	28.0	9.0 7.0 -webkit-	12.1

Definition and Usage

Aligned within the container (vertical) when the align-content in the elastic properties of the container does not occupy all the available space cross shaft.

Tip: Use the alignment justify-content attribute (level) on the spindle.

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

Defaults:	stretch
inherit:	no
Can be animated:	no. Please refer to animation (Animatable) .
version:	CSS3
JavaScript syntax:	object .style.alignContent = "center"to try

CSS Syntax

Defaults

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