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 使用不同的 属性 值，我们看下不同的值带来的 效果 。
<!DOCTYPE html>
< html lang = " en " >
< head >
< Meta charset = " UTF-8 " >
< Meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > Document </ title >
< style >
.demo {
dis play : flex ;
flex-wrap : wrap ;
height : px ;
border : px solid #ccc ;
}
.item {
width : px ;
height : px ;
line-height : px ;
text-align : center ;
background : #ccc ;
border-right : px solid #fff ;
}
.demo-2 {
align-content : flex-end ;
justify-content : flex-end ;
}
.demo-3 {
align-content : center ;
}
.demo-4 {
align-content : space-between ;
}
.demo-5 {
align-content : space-around ;
}
</ style >
</ head >
< body >
< p >
flex-start: 默 认值。项目位于容器的开头。
</ p >
< div class = " demo demo-1 " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
< p >
flex-end 项目位于容器的结尾。
</ p >
< div class = " demo demo-2 " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
< p >
flex-end 项目位于容器的中心。
</ p >
< div class = " demo demo-3 " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
< p > space-between 项目位于各行之间留有空白的容器内。 </ p >
< div class = " demo demo-4 " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
< p > space-around 项目在容器的前后留白并 </ p >
< div class = " demo demo-5 " >
< div class = " item " > 1 </ div >
< div class = " item " > 2 </ div >
< div class = " item " > 3 </ div >
< div class = " item " > 4 </ div >
</ div >
</ body >
</ html >
效果 图
各种值设置的 效果
6. 小结
使用 justify-content 属性 对齐主轴上的各项（水平），它和 align-content 并不冲突 器内必须有多行的项目，该 属性 才能渲染出 效果 。
Grid 布局简介 ? ?align-items 竖直方向对齐方式