align-content 多轴对齐

这个属性可以改变项目在容器中的对齐方式。

1. 官方定义

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

2. 慕课解释

align-content 是当容器内部的元素换行之后,我们如何设置他们所有在水平方向上排列的,这里要说的是它是一个多轴的统一设置。

3. 语法

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

属性值

描述
stretch 默认值。元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
baseline 元素位于容器的基线上。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

4. 兼容性

IE Edge Firefox Chrome Safari Opera
10+ 12+ 28+ 4+ 6.1+ 12.1+

5. 实例

想改变对齐方式只要给 align-content 使用不同的属性值,我们看下不同的值带来的效果。

实例演示
预览 复制