flex中align-items与align-content的区别

        align-items和align-content都是设置每个flex元素在交叉轴的默认对齐方式：其对应的属性值和作用有很多一致的地方；

        在align-items中

属性值	作用
flex-start	位于容器的开头
flex-end	位于容器的结尾
center	居中显示

        在align-content中

属性值	作用
flex-start	位于容器的开头
flex-end	位于容器的结尾
center	居中显示
space-between	之间留有空白
space-around	两端都留有空白

        对于两者的的flex-start，center，flex-end，可以理解为沿着x轴（如果主轴是y轴）或者y轴（如果主轴是x轴）进行左中右，上中下进行对齐，便于理解！

PS：对于align-items和align-content的区别：

        align-items是针对单行的，是把单行来当做一个整体进行对齐方式操作，而align-content是针对多行的，是把多行来当做一个整体进行对齐方式操作，所以要根据自己的需求进行选择。

具体差异可以看如下截图：（以conter为例）

图0

当align-items=“conter”；

图1

当align-content=“conter”；

 图2

对比图1和图2 ，就能很好理解上面讲到的两者的区别。

（希望能帮到大家，不妥之处，还请大家指教！！！）