CSS3 align-content 属性

对齐弹性盒的 <div> 元素的各项：

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

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
align-content	21.0	11.0	28.0	9.0 7.0 -webkit-	12.1

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示

使用 justify-content 属性对齐主轴上的各项（水平）。

注意

容器内必须有多行的项目，该属性才能渲染出效果。

	值
默认值:	stretch
继承:	no
可动画化：	否，参见个别的属性。请参阅 可动画化（animatable）。
版本:	CSS3
JavaScript 语法:	object.style.alignContent="center"

语法

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

属性

值	描述
stretch	默认值。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center	元素位于容器的中心。 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start	元素位于容器的开头。 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end	元素位于容器的结尾。 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between	元素位于各行之间留有空白的容器内。 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around	元素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

实例

<style scoped>
.demo-align-content {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: stretch;
    align-content: stretch;
}

.demo-align-content.center{
    -webkit-align-content: center;
    align-content: center;
}
.demo-align-content.flex-start{
    -webkit-align-content: flex-start;
    align-content: flex-start;
}
.demo-align-content.flex-end{
    -webkit-align-content: flex-end;
    align-content: flex-end;
}
.demo-align-content.space-between{
    -webkit-align-content: space-between;
    align-content: space-between;
}
.demo-align-content.space-around{
    -webkit-align-content: space-around;
    align-content: space-around;
}

.demo-align-content div {
    width: 70px;
    height: 70px;
}
</style>
<div class="demo-align-content">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>
<div class="demo-align-content center">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>

效果

stretch，默认值

center

flex-start

flex-end

space-between

space-around